Enhancing an image with a hover-activated overlay

I'm trying to enhance the setup of my page with three images in columns by adding an extra overlay on top of the main image but beneath the hover effects. However, I seem to be encountering some difficulties while working on it.

Take a look at my code snippet below:

fiddle: http://jsfiddle.net/r4mp0v4v/

.wrapper img{
float:left;
width:100%;
}

@media screen and (min-width: 700px) {
.wrapper img{
    width:33%;
    height:100%;
}
}
body {
  display: block;
  margin: 0px;
}

img:hover{
opacity: 1;

}

img {
opacity: 0.5;
background: #000;
}

overlay_image{
position: absolute;
top: 60px; 
left: 80px;
}

<div class="wrapper">
<a href="Northside.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg" alt="">
<img src="http://creativitywindow.com/wp-content/uploads/2013/02/PNG-Portable-Network-Graphics.png" class="overlay_image">
</a>
</div>
<div class="wrapper">
<a href="Catering.html">
<img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Foods_(cropped).jpg" alt="">
</a>
</div>
<div class="wrapper">
<a href="test/index.html">
<img src="http://www.healthsguardian.com/wp-content/uploads/2015/05/Improper-time-to-have-some-foods.jpg" alt="">
</a>
</div>

Answer №1

Check out this link to see the code in action: http://jsfiddle.net/r4mp0v4v/1/

I made some modifications to the code for better clarity.

.wrapper { position: relative; }
.wrapper img{
    width:33%;
}
body {
  display: block;
  margin: 0px;
}
img.overlay_image:hover{
    opacity: 0;
}
img.overlay_image {
    opacity: 0.5;
    background: #000;
}

.overlay_image{
    position: absolute;
    top: 0px; 
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 5;
}
.main_image{
    position: relative;
    z-index: 0;
}

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

Designing a flawless CSS pattern for the online world

Currently, I am working on creating a seamless CSS pattern for the web. Even though this may seem impractical and nonsensical, I find joy in experimenting with it. View my progress here After successfully designing my first tile, my next challenge is to ...

What is the process for turning off bootstrap form validation?

I am facing an issue with utilizing the default input email validation in my development project. It seems that Bootstrap, which is being used for the website, has its own validation mechanism. Whenever I begin typing in a Bootstrap input field, an error m ...

Neither of the squares are appearing on the canvas

Here is the code snippet I'm working with: const target = document.getElementById("target"); const context = target.getContext("2d"); function drawSquare() { context.fillStyle = "rgb(200, 0, 0)"; co ...

Remove child node from data-href feature

I have set up a table with rows that contain a data-href attribute to navigate to each row's specific page. Each row also features an 'edit' and 'delete' button at the end. Everything was functioning properly until I implemented a ...

Interested in incorporating href within a PHP variable?

My goal is to send a verification email without displaying the link in the email itself. Instead, I want to include text that says "click here to verify." { $verify_email=" Hello, Thank you for signing up. To verify your e-mail, please visit http://".$sit ...

Positioning a div within another div using values from a textarea - a step-by-step guide

Check out this script I have: HTML <div id="left"> <div>Orange Div</div> <div> <div class="left_text">top</div> <div class="left_text">left</div> <textarea class="count2"> </textarea& ...

What is the best way to incorporate text or characters into your website using CSS only, without using

Will it be able to function in IE? I am aware that IE does not support the content property for anything outside of what? ...

Setting the borderRadius for a web view on Android Maps V3: A complete guide

In my application, I am using Android Map V3 and have encountered a bug specific to the Kit-Kat version. The chromium kit throws up an error message - nativeOnDraw failed; clearing to background color, which prevents the map from being displayed. Despite ...

Changing the theme of a toggle button in Jquery Mobile when the button is pressed

I have a group of buttons with a specific class <div class="prog-day"> <div class="prog-clear" data-role="controlgroup" data-type="horizontal> <a href="#" data-role="button" data-mini="true" data-theme="b">Clear</a> ...

Aligning hyperlinks with background images

Trying to align the link with the background image centered but it keeps ending up at the top, even though I specified the sizes and each background image has different dimensions. https://i.sstatic.net/HMdMx.png HTML <section> <h3> ...

What is the best way to ensure that bootstrap cards are displayed next to each other when they are dynamically created by Django?

https://i.sstatic.net/KMrO1.pngI have encountered an issue with my Django blog. When I add a new blog post, it appears below the previous posts instead of alongside them, causing a vertical layout rather than a horizontal one. {% extends 'portfolio/b ...

Modify the paragraph's class upon clicking the radio button

I have been struggling with changing the color of <p> based on the radio button selected using two classes, red and blue. However, for some reason, it's not working as expected. If anyone has any insights or suggestions on how to fix this issue ...

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am st ...

Wrapping an <h1> tag inside an <a> link can create unwanted empty space on a web page

I am currently in the process of rebuilding the Porsche website using HTML, CSS, and JS. Specifically, I am looking to implement a "build your Porsche" link by enclosing it within an anchor tag. However, this seems to be causing excessive spacing on the pa ...

Ensure that the keyboard remains open in an Ionic chat app when a button is clicked

Having some trouble with my Ionic v1 chat application. Everything is set up, but I'm running into an issue where clicking on the send button causes the keyboard to lose focus from the input and then close. I've tried several solutions, but none ...

How can I extract information exclusively from child nodes with Jsoup?

Currently, I am facing an issue with extracting first-level <li> elements from a <ul> element. Even though I attempt to retrieve only the first-level <li> elements using Jsoup selector or getElementsByTag, the nested <li> elements w ...

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

The element 'Listitem' is unrecognized and cannot be found in the current context

I am currently working on an ASPX project in Visual Studio and have encountered an issue with a Drop Down field. It appears that the List Items are being ignored in my code. Can anyone advise me on what might be missing? <form runat="server"> &l ...

The hover effect generates a flickering sensation

I am having trouble displaying options on an image when hovering over it, as the displayed options keep flickering. $('a').hover(function(event) { var href = $(this).attr('href'); var top = $(this).next().css("bot ...

Fading CSS Hover Popup Display and Hide

I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution: a.tooltip span { width: 250 ...