<a>悬停时</a>如何使用<a>标签元素</a>缩小图像<a>？</a>

Question

I have this simple html code that shrinks an image when hovering it. Instead of shrinking the cosmetics image when hovered. How do you shrink that cosmetics image when you hover only the hovericon image inside the a tag element.

I want to shrink my cosmetics image when you hover only the <a> tag element in this line of code:

<a href="#"><img src="images/hovericon.png"></a>

 /** Choices @Banner**/ .image-wrapper { box-sizing: border-box; float: left; z-index: 999; position: relative; } .image-wrapper>img { width: 100%; } .image-wrapper:nth-child(even) { padding-left: 5px; } .cosmetics { position: absolute; font-family: 'Lato', sans-serif; color: white; right: 0; padding-top: 100px; padding-right: 30px; text-align: right } .haircare { position: absolute; font-family: 'Lato', sans-serif; color: white; right: 0; padding-top: 100px; padding-right: 30px; text-align: right } .makeups { position: absolute; font-family: 'Lato', sans-serif; color: white; left: 0; padding-top: 100px; padding-left: 30px; text-align: left; } .skincare { position: absolute; font-family: 'Lato', sans-serif; color: white; left: 0; padding-top: 100px; padding-left: 30px; text-align: left; } .shrink .img { height: 400px; width: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .shrink .img:hover { width: 300px; height: 300px; } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="imagecontent shrink"> <div class="image-wrapper"> <div class="cosmetics"> <h1 style="font-size: 33.13px;">COSMETICS</h1><br> <label style="font-size: 13px;">Dolore excepteur anim cupidatat tempor sit. Dolor</label><br> <label style="font-size: 13px;">sit ut mollit. Ut minim aliquip voluptate officia.</label><br><br> <a href="#"><img src="images/hovericon.png"></a> </div> <img class="img" src="images/cosmetics.png" /> </div> </div> 

Is there any possible way of doing this? Please help. I'm new to css3 and its design.

Answer 1

This is another way of doing it. With combination of some js.

 $('.hover-icon').on('mouseover', function() { $(this).parent('div').addClass('hovered'); }); $('.hover-icon').on('mouseout', function() { $(this).parent('div').removeClass('hovered'); }); 

 /** Choices @Banner**/ .image-wrapper { box-sizing: border-box; float: left; z-index: 999; position: relative; } .image-wrapper>img { width: 100%; } .image-wrapper:nth-child(even) { padding-left: 5px; } .cosmetics { font-family: 'Lato', sans-serif; color: white; right: 0; width: 300px; height: 300px; padding: 20px; text-align: right; } .hovered .thumbnail img { transform: scale(1); } .thumbnail { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; } .thumbnail img { width: 100%; transition: all 1s; transform: scale(1.5); } .haircare { position: absolute; font-family: 'Lato', sans-serif; color: white; right: 0; padding-top: 100px; padding-right: 30px; text-align: right } .makeups { position: absolute; font-family: 'Lato', sans-serif; color: white; left: 0; padding-top: 100px; padding-left: 30px; text-align: left; } .skincare { position: absolute; font-family: 'Lato', sans-serif; color: white; left: 0; padding-top: 100px; padding-left: 30px; text-align: left; } .shrink .img { height: 400px; width: 400px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .shrink .img:hover { width: 300px; height: 300px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="imagecontent shrink"> <div class="image-wrapper"> <div class="cosmetics"> <div class="thumbnail"> <img src="https://images.pexels.com/photos/350418/pexels-photo-350418.jpeg?h=350&auto=compress&cs=tinysrgb"> </div> <h1 style="font-size: 33.13px;">COSMETICS</h1><br> <label style="font-size: 13px;">Dolore excepteur anim cupidatat tempor sit. Dolor</label><br> <label style="font-size: 13px;">sit ut mollit. Ut minim aliquip voluptate officia.</label><br><br> <a href="#" class="hover-icon"><img src="http://placehold.it/50x50/fff000"></a> </div> </div> </div> 

Answer 2

You can use transform to shrink it properly.

a:hover img{
 transform:scale(0.5);
}

Answer 3

a img {
  transform: scale(1);
}
a:hover img {
  transform: scale(0.5); //shrink half
}

Search also for transform-origin : https://www.w3schools.com/cssref/css3_pr_transform-origin.asp