CSS: photo become larger & words(link) change color when hover-CodePudding

the effect I want: enter image description here

https://www.ctbcbank.com/twrbo/zh_tw/index.html

I like the hover effect on this website.

When hover, the icon will become larger and the words remain the same size but change color. I know how to make a photo become larger, however, I don't know how to control words in the same div together.The css codes below can control photo. I need someone help me to include the words inside.

home01 is the css class of my photo. I want to name the word(link) as home001.

.home01{
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
}
.home01:hover {
transform: scale(1.06);  cursor: pointer;
}

CodePudding user response：

Apply hover on parent div class of image and text, and then apply styles to p element.

.parent-div:hover p{
   color:green;
}

<div >
  <img >
  <p >your text here</p>
</div>

CodePudding user response：

.home01:hover {
    transform: scale(1.06);  cursor: pointer;
    color:green;
}

or try this

your div name:hover p(for here add the text type you use(eg-p,h1,h2) insted of p) { color:green; }

CodePudding user response：

Maybe something like this.

.home01{
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  align-items: center;
  max-height : 150px;
  max-width: 150px;
  align-items: center;
}

.home01 img {
  object-fit: contain;
  max-height : 150px;
  max-width: 150px;
  
  }

.home01 img:hover {
transform: scale(1.06);  cursor: pointer;

}

.mytext {
  color: black;
  font-size: 20px;
  text-decoration: none;
  }

.home01 img:hover   .mytext {color: #007979;}

<div >
  <img src="https://www.ctbcbank.com/content/dam/twrbo/images/icon/icon_service_onlineApply__3x.png">
  <a href="#" >MY CAPTION</a>
</div>