Adjusting the transparency of an image when hovering over a button

Question

Adjusting the transparency of an image when hovering over a button

Recently, I've encountered a situation where I have an image with a button on top. My current task is to write some CSS code that will adjust the opacity of the image when hovering over the button.

This is what I came up with:

.wwdimg:hover {
  opacity: 0.5;
}

<div>
  <img src="http://via.placeholder.com/350x150">
  <div><button class="wwdimg"> clickme </button></div>
</div>

However, after implementing this code, I noticed that instead of the image's opacity changing, it was actually the button's opacity that was affected.

html css

Answer 1

Answer №1

To achieve the desired effect with your current markup, CSS alone is not sufficient. Some changes need to be made to the HTML structure, such as moving the image after the button.

.wwdimg:hover+img {
  opacity: 0.5;
}

<div>
  <button class="wwdimg">clickme</button>
  <img src="http://via.placeholder.com/350x150">
</div>

If altering the HTML is not an option, JavaScript will be needed to achieve the desired result.

var button = document.querySelector(".wwdimg");
var img = document.querySelector(".image");
button.onmouseover = function() {
  img.style.opacity = ".5";
}
button.onmouseout = function() {
  img.style.opacity = "1";
}

<div>
  <img class="image" src="http://via.placeholder.com/350x150">
  <div><button class="wwdimg">clickme</button></div>
</div>

Answer 2

To achieve the desired effect with your current markup, CSS alone is not sufficient. Some changes need to be made to the HTML structure, such as moving the image after the button.

.wwdimg:hover+img {
  opacity: 0.5;
}

<div>
  <button class="wwdimg">clickme</button>
  <img src="http://via.placeholder.com/350x150">
</div>

If altering the HTML is not an option, JavaScript will be needed to achieve the desired result.

var button = document.querySelector(".wwdimg");
var img = document.querySelector(".image");
button.onmouseover = function() {
  img.style.opacity = ".5";
}
button.onmouseout = function() {
  img.style.opacity = "1";
}

<div>
  <img class="image" src="http://via.placeholder.com/350x150">
  <div><button class="wwdimg">clickme</button></div>
</div>

Answer 3

Answer №2

Check out the following fiddle link to see it in action:
https://jsfiddle.net/Netven/akaqoaz0/17/

    $('.wwdimg').mouseover(function(){
        $('#img_holder').css("opacity", "0.2");
    });
      $('.wwdimg').mouseout(function(){
        $('#img_holder').css("opacity", "1");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="img_holder" width="200px" height="auto" src="https://images.dreamstream.com/prodds/prddsimg/OM_pasteIt8_2_2018_10_0_27495346.jpeg"> 
<div><button class="wwdimg"> clickme </button></div>
</div>

Answer 4

Check out the following fiddle link to see it in action:
https://jsfiddle.net/Netven/akaqoaz0/17/

    $('.wwdimg').mouseover(function(){
        $('#img_holder').css("opacity", "0.2");
    });
      $('.wwdimg').mouseout(function(){
        $('#img_holder').css("opacity", "1");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img id="img_holder" width="200px" height="auto" src="https://images.dreamstream.com/prodds/prddsimg/OM_pasteIt8_2_2018_10_0_27495346.jpeg"> 
<div><button class="wwdimg"> clickme </button></div>
</div>

Answer 5

Answer №3

To achieve this effect, two conditions must be met: a) the button and the image must have the same parent element, and b) the image should appear after the button.

.image-button {
  display: inline-block;
  position: relative;
}

.image-button button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 10px;
  z-index: 99;
}

.image-button img {
  display: block;
  position: relative;
  transition: opacity .4s ease-in-out;
}

.image-button button:hover + img {
  opacity: .5;
}

<div class="image-button">
  <button type="button">Hover me</button>
  <img src="http://placebear.com/400/180"/ >
</div>

Answer 6

To achieve this effect, two conditions must be met: a) the button and the image must have the same parent element, and b) the image should appear after the button.

.image-button {
  display: inline-block;
  position: relative;
}

.image-button button {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 10px;
  z-index: 99;
}

.image-button img {
  display: block;
  position: relative;
  transition: opacity .4s ease-in-out;
}

.image-button button:hover + img {
  opacity: .5;
}

<div class="image-button">
  <button type="button">Hover me</button>
  <img src="http://placebear.com/400/180"/ >
</div>

Adjusting the transparency of an image when hovering over a button

Answer №1

Answer №2

Answer №3

Similar questions

Resizing Images Responsively Using Bootstrap

What is the reason for this only functioning with the "!important" declaration?

The execution of JQuery/Javascript is restricted to only the initial condition within a Visualforce page utilizing the apex:outputpanel tag

Turn off the annoying right-click context menu in Firefox

Styling text using SVG in HTML

Exploring HTML elements using CSS Selectors in Scrapy with Python

When attempting to specify the path in the angular.json file, Angular encounters difficulty accessing Bootstrap from the node_modules directory

MVC.NET: Offering User-Friendly Loading of Initial x Items with an Option to Load More

Positioning of the calendar icon in the date input field is problematic when in RTL direction on Chrome and various other

Effective Ways to Redirect During or After Executing the onClick Function of Button

Firefox is not rendering HTML5 elements properly

Using Highcharts to showcase a marker icon for a specific value

The ready/load frame event fails to trigger when a new frame URL is loaded

Changing pages in Django with a single click of a line: A step-by-step guide

A new WordPress plugin that includes a custom designed stylesheet featuring a hidden display property within a specific

Resizable item within a text box (similar to an HTML editing tool)

What could be causing the float left and right to not function properly in this situation?

Web server experiencing issues with loading scripts and CSS files

Value of PHP checkboxes

Encountered a style property reading error