Ховер эффект для изображения - Вопросы по CSS

    <!-- normal -->
    <div class="ih-item circle effect1"><a href="#">
        <div class="spinner"></div>
        <div class="img"><img src="images/assets/2.jpg" alt="img"></div>
        <div class="info">
          <div class="info-back">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end normal -->

<!-- From top and bottom-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item square effect6 from_top_and_bottom"><a href="#">
        <div class="img"><img src="images/assets/rect/1.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item square colored effect6 from_top_and_bottom"><a href="#">
        <div class="img"><img src="images/assets/rect/3.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end From top and bottom-->
 
 
<!-- From left and right-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item square effect6 from_left_and_right"><a href="#">
        <div class="img"><img src="images/assets/rect/2.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item square colored effect6 from_left_and_right"><a href="#">
        <div class="img"><img src="images/assets/rect/4.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end From left and right-->
 
 
<!-- Top to bottom-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item square effect6 top_to_bottom"><a href="#">
        <div class="img"><img src="images/assets/rect/5.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item square colored effect6 top_to_bottom"><a href="#">
        <div class="img"><img src="images/assets/rect/7.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Top to bottom-->
 
 
<!-- Bottom to top-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item square effect6 bottom_to_top"><a href="#">
        <div class="img"><img src="images/assets/rect/6.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item square colored effect6 bottom_to_top"><a href="#">
        <div class="img"><img src="images/assets/rect/8.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Bottom to top--> 

.image-hover {
 overflow:hidden;
 width: 380px;
 height:250px;
 }
 .image-hover img {
 transition: all 1s ease-out;
 }
 
.image-hover img:hover{
 transform: scale(1.2);
 }

<div class="entry-header<?php echo $tpl_params->get('show_post_format')? ' has-post-format': ''; ?>">

	<?php echo JLayoutHelper::render('joomla.content.post_formats.icons',  $post_format); ?>

	<?php if ($useDefList && ($info == 0 || $info == 2)) : ?>
		<?php echo JLayoutHelper::render('joomla.content.info_block.block', array('item' => $this->item, 'params' => $params, 'position' => 'above')); ?>
	<?php endif; ?>
	<?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
	<?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
	
</div>

.image-hover {
 overflow:hidden;
 width: auto;
 height:auto;
 }
 .image-hover img {
 transition: all 0.2s ease-out;
 }
 
.image-hover img:hover{
 transform: scale(0.9);
 border: 1px solid #c5c5c5;
 transform: scale(1.2) rotate(5deg);
 opacity:0.5;
  }