Question 290219 in Html Question posted in
Some basic documentation can be found here.

Html – I am trying to add a hover to an image in a list to enlarge the image and set opacity of div to 1 instead of 0

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

Tags:

2

Answers


  1. 0

    You need to use JavaScript for this. Here’s an example:

    // Declare the hover element:
const hoverEl = document.querySelector('.element-to-hover-over');
// Declare the element to change opacity:
const elToChangeOpacity = document.querySelector('.element-to-change-opacity')

// If the user hovers over the elemet:
hoverEl.addEventListener('mouseover', () => {
  elToChangeOpacity.style.opacity = 1;
});

// If the user stops hovering over the element:
hoverEl.addEventListener('mouseleave', () => {
  elToChangeOpacity.style.opacity = 0;
});
    .element-to-hover-over {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: green;
  color: white;
  width: 500px;
}
.element-to-change-opacity {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: black;
  color: white;
  width: 500px;
  opacity: 0;
}
    <div class='element-to-hover-over'>Hover over me</div>
<div class='element-to-change-opacity'>Content</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search