Add interactive buttons to an image that will appear when hovered over, while also darkening the

Question

Add interactive buttons to an image that will appear when hovered over, while also darkening the

Is it possible to create an effect where the image darkens slightly when the mouse hovers over it, followed by buttons appearing on hover like in the image provided? Additionally, when hovering over a button, could it change color to red similar to the picture, with the image description text appearing below the buttons as shown? Furthermore, once a button is clicked, can it redirect us to a new URL (e.g., www.google.com)? I'm unsure how to implement this - does anyone have any code snippets they could share?

https://i.sstatic.net/VE7dR.png

jquery html css hover

Answer 1

Answer №1

I believe this solution aligns with your needs. Feel free to give it a try. My focus was on addressing your main points, so hopefully this will suit your requirements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div.contain{
  width: 1000px;
  height: 667px;
  border: 2px solid black;
  margin: 100px;
  margin-top: 10px;
  background-image: url(https://dancingaspen.files.wordpress.com/2015/09/coffee-shop-mug.jpg);
}

div.mask{
  width: 100%;
  height: 100%;
  background-color: black;
  position:relative;
  opacity: 0;

}

.zoom{
  width: 150px;
  height: 50px;
  color: white;
  font-size: 35px;
  background-color: red;
  position: absolute;
  top: 300px;
  left: 300px;
  border: 2px solid white;
  border-radius: 10px;
  display: none;
  text-align: center;
  font-size: monospace;
  padding-top: 15px;
  text-decoration: none;
}

.description{
 
  position: absolute;
  width: 70%;
  height: 30%;
  top:410px;
  left: 12%;
  font-size: 35px;
  color: white;
  font-family: zapfino;
  text-align: center;
  display: none;
}


</style>
<body>

<div class="contain">
 <div class="mask"></div>
    <a href="#" target="_blank" class="zoom">ZOOM</a>
    <div class="description">your description here</div>
</div>

 <script type="text/javascript">
   $(document).ready(function(){
    $(".contain").mouseenter(function(){
      $(".mask").animate({opacity:0.5},1000);
      $(".zoom").fadeIn(1500);
      $(".description").fadeIn(1500);
    });

     $(".contain").mouseleave(function(){
      $(".mask").animate({opacity:0},1000);
       $(".zoom").fadeOut();
      $(".description").fadeOut();
    });
   });
 </script>

</body>
</html>

Simply copy, paste, and execute the code above to see the results.

Answer 2

I believe this solution aligns with your needs. Feel free to give it a try. My focus was on addressing your main points, so hopefully this will suit your requirements.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div.contain{
  width: 1000px;
  height: 667px;
  border: 2px solid black;
  margin: 100px;
  margin-top: 10px;
  background-image: url(https://dancingaspen.files.wordpress.com/2015/09/coffee-shop-mug.jpg);
}

div.mask{
  width: 100%;
  height: 100%;
  background-color: black;
  position:relative;
  opacity: 0;

}

.zoom{
  width: 150px;
  height: 50px;
  color: white;
  font-size: 35px;
  background-color: red;
  position: absolute;
  top: 300px;
  left: 300px;
  border: 2px solid white;
  border-radius: 10px;
  display: none;
  text-align: center;
  font-size: monospace;
  padding-top: 15px;
  text-decoration: none;
}

.description{
 
  position: absolute;
  width: 70%;
  height: 30%;
  top:410px;
  left: 12%;
  font-size: 35px;
  color: white;
  font-family: zapfino;
  text-align: center;
  display: none;
}


</style>
<body>

<div class="contain">
 <div class="mask"></div>
    <a href="#" target="_blank" class="zoom">ZOOM</a>
    <div class="description">your description here</div>
</div>

 <script type="text/javascript">
   $(document).ready(function(){
    $(".contain").mouseenter(function(){
      $(".mask").animate({opacity:0.5},1000);
      $(".zoom").fadeIn(1500);
      $(".description").fadeIn(1500);
    });

     $(".contain").mouseleave(function(){
      $(".mask").animate({opacity:0},1000);
       $(".zoom").fadeOut();
      $(".description").fadeOut();
    });
   });
 </script>

</body>
</html>

Simply copy, paste, and execute the code above to see the results.

Answer 3

Answer №2

To achieve a darkened effect on images, you can utilize basic CSS properties with the 'hover' attribute. Simply select the image or its containing div and apply a lower opacity on hover state using opacity:0.5;

If you prefer to darken the image without altering the background, consider setting the image as the background of the parent div.

<main container>
   <sub container>

.main {background: 'images/image.jpg';}
  .sub {background-color: black; opacity:0;}
  .sub:hover {opacity:0.7;}

Answer 4

To achieve a darkened effect on images, you can utilize basic CSS properties with the 'hover' attribute. Simply select the image or its containing div and apply a lower opacity on hover state using opacity:0.5;

If you prefer to darken the image without altering the background, consider setting the image as the background of the parent div.

<main container>
   <sub container>

.main {background: 'images/image.jpg';}
  .sub {background-color: black; opacity:0;}
  .sub:hover {opacity:0.7;}

Add interactive buttons to an image that will appear when hovered over, while also darkening the

Answer №1

Answer №2

Similar questions

Tips for incorporating animation when opening a Jquery SimpleModal

Challenges encountered when uploading a file using PHP

Using the HTML5 Video Element on an iPad

The option for selection is malfunctioning

Transmit JSON from PHP to an autocomplete feature and include a data attribute in the input field

Is it possible to manipulate the content inside a div tag using JavaScript in HTML?

Obtain the image's name using Jquery

Recursively toggle child elements using JQuery

What is the most effective method for parsing a JSON object with a dynamic object name?

Can I kindly request assistance with implementing jQuery Autocomplete on a C# IHttpHandler in a non-sequential

Can someone show me how to position this button within a React component onto the card that I've just made?

Resize the Bootstrap select element based on its contents

Green and red values hovering within the keyframe

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

What is the best way to ensure an inline-block element spans the entire width?

Chrome's Ctrl-Shift-N event binding

Ways to retrieve the current tab title that I have designated in the Jquery Tabs UI

Move a div element as you scroll down the page

What is the best way to address cookie issues while working on a full stack application that utilizes Vue and Express.js?

I am encountering a problem with the $invalid property in AngularJS