徽标背景缩放不使徽标缩放

Question

我在页眉中使用的徽标没有背景，但我在将鼠标悬停在徽标上时添加了背景。我希望徽标背景放大，但我使用的代码使徽标放大而不是背景...... 如何更改代码以在不影响徽标的情况下放大徽标背景？我真的已经尝试了几个星期...任何帮助将不胜感激。

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>

Answer 1

由于您没有提供任何信息 html 但根据您的问题，我创建了一个方案来帮助您解决问题看看 fiddle https://jsfiddle.net/f7v0frmy/ 我所做的只是制作了一个名为 .anim-Gah img 的可重用 class，并将其下的 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 class 之外，然后随心所欲地调整位置。请注意，尽管在 jsfiddle 中提到了 z-index ;) 干杯！

徽标背景缩放不使徽标缩放

Logo Background Zoom Without Making Logo Zoom

html

css

background

hover

effect

HTML:

徽标背景缩放 不使徽标缩放

Logo Background Zoom Without Making Logo Zoom

html

css

background

hover

effect

HTML:

徽标背景缩放不使徽标缩放