如何使用<a> tag element when hovered?

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

这是另一种方法。结合一些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

您可以使用transform来正确缩小它。

while True:
    data=arduino.readLine()
    time.sleep(1)

for x in range(0, 100):
    data=arduino.readLine()
    time.sleep(1)      

Answer 3

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

还搜索transform-origin：https://www.w3schools.com/cssref/css3_pr_transform-origin.asp