I am working on a simple project where a single block element hover will show 4x zoom element. I did it through pure css and css3 transition. See the jsfiddle demo . There will be four element , each has different hover element. But when I hover on it only one hover element is showing though it is not associate with that block or element.

Check the demo to make yourself an opinion.

```css
.main {
  position: relative;
  width: 300px;
  overflow: hidden
}

.main a {
  width: 50%;
  height: 50%;
  float: left;
}

.main a .child {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: gray;
  filter: alpha(opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -ms-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}

.main a:hover .child {
  -webkit-transition: opacity 0.2s ease-in;
  -moz-transition: opacity 0.2s ease-in;
  -ms-transition: opacity 0.2s ease-in;
  -o-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1.0;
}
```

```html
<div class="main">
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>1.Text</h4>
    </div>
  </a>
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>2.Text</h4>
    </div>
  </a>
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>3.Text</h4>
    </div>
  </a>
  <a href="">
    <img src="http://placehold.it/150x150">
    <div class="child">
      <h4>4.Text</h4>
    </div>
  </a>

</div>
```

[Demo project on JSFiddle](https://jsfiddle.net/zinannadeem/phmypx9v/6/) 

Important note: if i use display none or block in hover instate the css3 transition then it is working fine, But i need the fade effect.