Overlaying a black transparent layer onto an image

Can someone help me achieve a light black overlay on an image when hovering over it, just like the text does in this code snippet? I'm new to CSS and HTML and any assistance would be greatly appreciated!

Here is the sample code:

<div id="con">
   <div id="box1">
      <p id="text1">
         <a href="url">DESTINATIONS</a>
      </p>
      </p>
      <p id="text2">
         AMALFI<BR>SORRENTO<BR>POSITANO</a>
      </p>

      <p id="text3">
         <a href="url">THINGS TO DO</a>
      </p>
      </p>
      <p id="text4">
         TOURS<BR>MUSUEMS<BR>SHOPPING</a>
      </p>
</div>

CSS Code:

#con {
   width:1024px;
   height:670px;
   background-color: #161717;
}


#box1 {
   float: left;
   font-size: 25px;
   width: 388px;
   height: 477px;
   background-image: url(media/trying1.png);
   background-size: cover;
   margin-left: 120px;
   margin-top: 90px;
}

#text1 {
   z-index:100;
   color:white;
   font-size:30px;
   text-align: center; 
   margin-top:80px;
   line-height:55px;
   opacity: 0;
   transition: all 0.5s;
}

#box1:hover #text1 {
   opacity: 1;
}
htmlcssimageopacity

Answer №1

To achieve this effect, utilize either the :before or :after pseudo-elements.

#container{
  position:relative;
}

#container:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:black;
    opacity:0;
    z-index:0;

}

#container:hover:before{
 opacity:.6;   
 transition: all 0.5s;
}

#container > *{
    position:relative;
    z-index:1;
}

Live Demo Here

Answer №2

CS3 is amazing! Gone are the days where you need JS for simple rollover effects. The code provided by Gopalraju should do the trick, but I also have my own example below. Feel free to play around with it and customize the code to suit your needs.

The parent div in this scenario has a sleek black background, and the imgdiv changes the opacity of everything inside it to 50% when the mouse rolls over the div. In this particular case, the image is contained within the div.

There are multiple methods for achieving this effect, and this is just one more to add to your arsenal. Best of luck!

.parentdiv {
    background-color:#000;
    height:100%;
    width:100%;
    }

    .imgdiv {
      padding:30px;
    }

    .imgdiv a{
    opacity: 1;
    filter: alpha(opacity=100);
     -webkit-transition: opacity 0.5s linear;
    }

    .imgdiv a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
     -webkit-transition: opacity 0.5s linear;
    }
<div class="parentdiv">
  <div class="imgdiv">
    <a href="http://www.domain.com.au/link.html">
      <img src="http://placehold.it/350x150" alt="image" height="150" width="350">
    </a>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A Beginner's Guide to HTML: Finding the Optimal Viewport Dimensions

When it comes to designing a website, there are various opinions on the best window size or viewport size to cater to. If you want to reach a wide audience, what size should you prioritize? For example, if you are creating a gaming website, should you assu ...

htmlcss

Utilizing a combination of PHP and jQuery, certain checkbox options were dynamically deactivated

<input type="checkbox" name="pref[]" value="red//fuji" />Fuji <input type="checkbox" name="pref[]" value="red//pinklady" />Pink Lady <input type="checkbox" name="pref[]" value="red//reddelicious" />Red Delicious <input type="checkbox" ...

javascriptphpjqueryhtmlcheckbox

Utilizing the "Skip navigation" functionality in conjunction with the Durandal router

Currently, I am developing a HTML5 single page application that must adhere to the "WCAG 2.0" guidelines. In this project, I am utilizing Twitter Bootstrap as the frontend framework and Durandal.js for the SPA functionality. I am seeking advice on the be ...

htmltwitter-bootstrap-3accessibilitydurandalwcag2.0

What is the best way to make the block rotate each time the button is clicked?

Specifically, I am having trouble getting the block to rotate properly. Currently, the block only rotates once when clicked, but I want it to rotate each time I click in both directions. Any suggestions on how to achieve this? var now = 10; $('. ...

htmlcsssvg

Tips on altering button color when input field is populated

I have been researching online and have not come across any discussions on how to dynamically change the color of a button in JavaScript when an input field is filled. I haven't really tried any code myself because there are very limited resources add ...

javascripthtmljquerybuttoninput

Tips for extracting high-quality images from a website using Python and Selenium

Trying to utilize a web scraper to fetch images from a specific website. Encountering issues with image quality due to current methods being used. Attempting to scrape images directly from this website. Attempts to download the images and use the obtain ...

pythonimageselenium-webdriverimage-quality

Deliver real-time notifications to linked users by leveraging socket.io and node.js

Is there a solution for sending real-time updates to connected clients every second without using the setInterval() function in nodejs and socket.io? Please provide an alternative method that fits my specific scenario. ...

javascriptjqueryhtmlnode.jssocket.io

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...

javascriptjqueryhtmltinymcetext-editor

What is the best way to nest a div within a flexbox container?

I am attempting to create a div that is based on percentages, and I want to nest a div inside another. Specifically, I want the center (xyz div) to only take up 90% of the height of the content-div. My goal is for the "content" div to be responsive to 90% ...

htmlcss

Guide to developing JavaScript code that moves information from one local website to a different one

Here's the scenario: You input text into a field on website A and click a button. Upon clicking that button, the entered text should appear in website B. I attempted to use localStorage for this functionality, but unfortunately it was not successful. ...

javascripthtml

What is the purpose of the property "fitInto" in a paper-dialog

Hey there, I'm new to Polymer and I've been trying to customize a dialog to fit it into a div so it behaves like a popover. I attempted the following code: <paper-dialog fitInto="{{body}}"> <h2>Header</h2> <paper-di ...

htmlpolymerpolymer-1.0polymer-starter-kit

What is the best way to insert an image into an HTML card?

I'm a beginner in PHP and I'm working on creating a registration form that should have a design similar to the picture linked below: https://i.sstatic.net/7P7bn.png However, the form I've created so far looks like this: https://i.sstatic. ...

cssbootstrap-4

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

I have incorporated a main menu in my website using the Bootstrap 4 navbar. However, I also have an additional div (.social-navbar) containing some extra menu items that I want to RELOCATE and INSERT into the Bootstrap menu only on mobile devices. Essentia ...

javascriptjquerycsstwitter-bootstrap

Navigating a puzzle menu in web design can be simplified with a few easy steps

When it comes to executing my design ideas, I have 2 options in mind. My main concern is which one will offer more flexibility for adding animations and tinkering with CSS later on. The first idea involves a navigation menu where hovering over an item mak ...

htmlcsscss-shapes

What sets npm node-sass apart from npm sass?

Recently, I discovered that the recommended approach is to utilize @use rather than @import in sass. However, it appears that using npm sass instead of npm node-sass is necessary for this. Can you clarify the distinction between these two? Also, why do @ ...

cssnpmsassnode-modulesnode-sass

Tips on choosing vml elements using jquery or vanilla javascript

I am trying to select a VML element using jQuery without relying on 'id' or 'class', but my attempts have been unsuccessful so far. <v:oval id="vmlElement" style='width:100pt;height:75pt' fillcolor="red"> </v:oval> ...

javascriptjqueryhtmldomvml

Properly incorporating an if condition into a PHP string

I have the code below to display some data, $html = "<table><tr><th>Email Address</th><th>Event</th><th>Tag</th><th>Time</th></tr>" .if(count($result->http_response_body->items) ...

phphtml

Seamlessly adaptive HTML5 video playback

Has anyone figured out how to make an HTML5 video in an absolutely positioned <video> element resize to fit the window width and height without ever getting cropped? Many solutions I've come across rely on using the <iframe> tag, which is ...

javascriptjqueryhtmlcsshtml5-video

What could be causing a single image not to show up on an HTML page?

I have been searching tirelessly for a solution but cannot seem to find one. Interestingly, in my HTML document, an image appears perfectly fine when viewed from my browser. However, once I upload my website to a server host, this specific image refuses to ...

htmlcss

JS Code for Optimal Viewing on Mobile Devices

I'm struggling with creating 3 image columns in 2 columns on mobile. It seems like there is a JS issue related to the minslide:3 and maxslide:3 conditions... When viewed on mobile, it's displaying 3 slides instead of 2. How can I adjust it to sh ...

javascriptjqueryhtmlcssjquery-mobile