徽标背景缩放而不进行徽标缩放答案

【问题标题】：Logo Background Zoom Without Making Logo Zoom徽标背景缩放而不进行徽标缩放
【发布时间】：2016-09-25 00:39:03
【问题描述】：

我在标题中使用的徽标没有背景，但我为徽标悬停时添加了背景。我想让标志背景放大，但我使用的代码使标志放大而不是背景...... 如何更改代码以使徽标背景放大而不影响徽标？我真的已经尝试了好几个星期了......任何帮助将不胜感激。

CSS

.cento-header .logo,
.cento-header .logo a {
  display: block;
  color: #000000;
  text-align: center;
  letter-spacing: .04em;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
}

/**hover**/

.cento-header .logo a:hover img {
  display: block;
  color: #000000;
  text-align: center;
  letter-spacing: .04em;
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: normal;
  background: #000;
  background-size: cover;
  background-position: center center;
}

HTML：

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>
<body class='tall-header-page  wsite-theme-light'>
<div class="wrapper">
<div class="cento-header">
  <div class="container"> 
    <div class="logo">{logo}</div>
    <label class="hamburger"><span></span></label>
  </div>
  <div class="nav-wrap">
    <div class="container">
      <div class="nav desktop-nav">{menu}</div>
    </div><!-- end .container -->
  </div><!-- end .nav-wrap -->
</div><!-- end .header -->  

<div class="banner-wrap wsite-background">
  <div class="container">
    <div class="banner">
      <h2>{headline:text global="false"}</h2>
      <p>{headline-paragraph:text global="false"}</p>
    </div>
  </div><!-- end container -->
</div><!-- end banner-wrap -->

<div class="content-wrap">
  <div class="container">
    <div class="main-wrap">{content}</div>
  </div><!-- end container -->
</div><!-- end main-wrap -->

<div class="light-blue-wrap">
  <div class="container">
    {light-blue-wrap:content  global="false"}
  </div><!-- end container -->
</div><!-- end light-blue-post -->

 <div class="banner-wrap2 wsite-background">
  <div class="container">
    <div class="banner">
      <h2>{headline:text global="false"}</h2>
      <p>{headline-paragraph:text global="false"}</p>
    </div>
  </div><!-- end container -->
</div><!-- end banner-wrap2 -->

    <div class="usable-one-wrap">
  <div class="container">
    {usable-one-wrap:content  global="false"}
  </div><!-- end container -->
</div><!-- end usable-one-post -->

<div class="footer-wrap">
   <div class="container">
     <div class="footer">{footer}</div>
    </div><!-- end container -->
  </div><!-- end footer-wrap -->
 </div>

 <div class="nav mobile-nav">{menu}</div>

  <script type="text/javascript" src="/files/theme/plugins.js"></script>
 <script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>

【问题讨论】：

请发布您的 HTML 和 CSS。
我的网站链接是：www.gooodsketch.weebly.com 我认为这可能有助于解释我的意思，只需将鼠标悬停在徽标上，您就会明白我的意思
我有点希望当你将鼠标悬停在它上面时它看起来像这个网站上的徽标... www.zoella.co.uk
基本上，当您将鼠标悬停在徽标上时，我希望在放大时出现黑色背景:) 请帮帮我！ :)

标签： html css background hover effect

【解决方案1】：

由于您没有提供任何 html，但根据您的问题，我创建了一个场景来帮助您解决问题看看小提琴https://jsfiddle.net/f7v0frmy/ 我所做的只是创建了一个名为.anim-Gah img 的可重用类，并将其下的img 作为子元素。所以必要的html就像

<div class="container orwhatever anim-Gah">
  <img src="http://27.media.tumblr.com/tumblr_m2mypiS48E1qzex9io1_1280.jpg">
</div>

而css就是

.anim-Gah img {
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    -webkit-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out
}

.anim-Gah:hover img {
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

对于您的徽标，只需放在该 anim-gah 类之外，并以您喜欢的任何方式调整位置。请注意，尽管在 jsfiddle 中提到了 z-index ;) 干杯！

【讨论】：

非常感谢您的尝试，但它仍然无法像我希望的那样工作，当您将鼠标悬停在它上面时，我有点希望它看起来像这个网站上的徽标...... www.zoella.co.uk 我的网站是：www.gooodsketch.weebly.com