0

I'm trying to call the zoom in effect on hover on title but it's working only on the image.

JSFiddle Demo

 .image {
      position: relative;
      overflow: hidden;
      width: 100px;
    }
    .image img {
      max-width: 100%;
      -moz-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
    }
    .image:hover img, .title-header:hover .image img{
      -moz-transform: scale(1.1);
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
    <div>
      <a href="#">
        <div class="image">
          <img src="pepsi.jpg">
        </div>
      </a>
    </div>
    <div class="title">
      <div class="title-header">
        <a href="#"><h4>Title Here</h4></a>
      </div>
    </div>

I want to be able to zoom in on the image when I hover over the text too. How can I achieve this?

kabanus
  • 21,167
  • 5
  • 30
  • 63
Elaine Byene
  • 3,574
  • 6
  • 40
  • 75
  • with your actual code there is no way – Temani Afif Jun 19 '18 at 21:03
  • do you want the image to zoom when you hover on the title or the title to zoom when you hover on the title? – Brett East Jun 19 '18 at 21:04
  • @BrettEast I want the image to zoom when I hover on the title. Thanks. – Elaine Byene Jun 19 '18 at 21:06
  • @TemaniAfif So what would be the possible way to achieve this? Said this is duplicate but I don't see how!! – Elaine Byene Jun 19 '18 at 21:08
  • 1
    This is closed @ElaineByene so I couldn't write this as an answer for you. If you wrap it all in a `
    ` and then in your css use `.wrapper:hover img {...` then that should do it.
     – Brett East Jun 19 '18 at 21:08
  • there is no *how* because you simply cannot in such situations ;) .. you have to think differently and re-think you HTML structure to be able to do it. – Temani Afif Jun 19 '18 at 21:09
  • @BrettEast Thanks but that would hover the image whenever I come to the div. I want it only when hovered over the text. Upvoted you. – Elaine Byene Jun 19 '18 at 21:10
  • @TemaniAfif Genius. – Elaine Byene Jun 19 '18 at 21:10
  • Yeah I'm trying different combinations. Couldn't figure out yet. Thank You. – Elaine Byene Jun 19 '18 at 21:16
  • you are mistaken. I want the hover effect to be in effect only if i hover the image or the text. Not on the div (empty spaces). Thank you. Current status: http://jsfiddle.net/75gd6ufn/8/ You can hover on the empty space in the right, the image zooms in. I don't want that. – Elaine Byene Jun 19 '18 at 21:19
  • 1
    here is an idea : http://jsfiddle.net/75gd6ufn/13/ |I let you understand alone] .. as I said think differently and you will find tricks ;) – Temani Afif Jun 19 '18 at 21:25
  • @TemaniAfif Thanks. The cursor style needs some work but this is great. Wish I could mark this as resolve. – Elaine Byene Jun 19 '18 at 21:29

0 Answers0