在CSS中禁用子对象的转换

Question

我想在我的子div中禁用转换。这是fiddle。是否可以禁用类.image-text的缩放？

  .photo:hover{
   transform: scale(1.4);
   -moz-transform: scale(1.4);
   -webkit-transform: scale(1.4);
   -o-transform: scale(1.4);
   -ms-transform: scale(1.4);
   }

  .photo:hover >*{
   transform: none;
   }

Answer 1

make a new child element and call your image on it.

在这里您可以看到http://jsfiddle.net/rajjuneja49/s3hWj/879/

可能你在找这个……

Answer 2

你可以看到这些例子。

​

  .element{ 
  width: 400px; 
  height: 550px;
  }
  
  img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    border: 0;
  }
  
  .main-photo-area {
    position:relative;
    display: block;
    overflow: hidden;
}
  .main-photo-area img.photo{
    transition: all 0.3s ease;
   
    width: 100%;
}

  .main-photo-area:hover img.photo{
   transform: scale(1.4);
  }


  .image-text {
  background: rgba(34, 90, 159, 0.6);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3em 3em 4.25em 3em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  }

  .image-text:hover { 
  opacity: 1; 
  }

<div class="element">
    <div class="main-photo-area">
    <img class="photo" src="http://heavytable.com/wp-content/uploads/2012/11/wine-glasses-650-325.jpg"/>
	  <a class="over" href="/szablon/?id=single">
      <div class="image-text">
        <h2>Titel</h2>
        <p>Desc</p>
        <span class="icon">Look</span>
      </div>
	  </a>
    </div>
</div>

​