Issue
I created a list and each li contains an image and a div which contains some text and initially the dev opacity is set to 0
On image hover I want the image to enlarge and change border radius - which I already did - and set opacity of the div to 1
The problem was that when I hover on the div area even though it's opacity is 0, the opacity changes to 1 and I want it to change only when I hover the image
HTML code
<div class="attractions">
<h2>Our top attractions</h2>
<div class = "content">
<ul>
<li class="image">
<a href="#"><img src="Images/luxor2.jpg" alt="luxor"></a>
<div class="text"><h3 id="img1">hello</h3></div>
</li>
<li class="image">
<a href="#"><img src="Images/dubai2.jpg" alt="dubai2"></a>
<div class="text"><h3 id="img1">hello</h3></div>
</li>
<li class="image">
<a href="#"><img src="Images/qatar2.jpg" alt="alexandria"></a>
<div class="text"><h3 id="img1">hello</h3></div>
</li>
</ul>
</div>
</div
CSS code
.attractions{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100vh;
background: #427D9D;
}
.content{
width: 80%;
}
.content ul{
padding-left: 60px;
padding-top: 50px;
display: flex;
align-items: center;
justify-content: space-evenly;
list-style: none;
}
.attractions img {
width: 90%;
border-radius: 50%;
transition: 0.5s;
}
.text{
margin-top: 50px;
width: 100%;
height: 150px;
background: #eee;
opacity: 0;
transition: opacity 0.4s linear;
}
.image img:hover{
border-radius: 1%;
transform: scale(1.2);
transition: 0.5s;
}
.image:hover .text :not(.text) {
opacity: 1;
transition: 0.5s;
}
I tried using :not(.text)
but it didn't work
Solution
You can use either img:hover+div
, img:hover~div
, or li:has(img:hover) div
selectors:
li {
margin-bottom: 1rem;
}
li div {
display: inline;
margin-left: 1rem;
opacity: 0;
transition: all 1s linear;
}
img:hover {
border-radius: 20%;
transform: scale(1.8);
transition: 0.5s;
}
img:hover+div {
color: red;
}
li:has(img:hover) div {
opacity: 1
}
<ul>
<li><img src="https://picsum.photos/20">
<div>image 1</div>
</li>
<li><img src="https://picsum.photos/20">
<div>image 2</div>
</li>
<li><img src="https://picsum.photos/20">
<div>image 3</div>
</li>
</ul>
Answered By - the Hutt
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.