Interactive CSS Image Hover Effect

I'm facing a challenge with adding a hover state to an image that already has an inner border with opacity set to .7 and round corners. I've tried using :hover in CSS, but haven't been successful.

The desired effect is for the border to turn blue on hover and have a png overlay.

Here's the HTML structure:

<div class="box" >  
<div class="imgWrap">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1"  >
</div>
</div>

And here's the CSS implementation:

.box{
    width:191px; 
    background:#FCFBDF;  
    margin: 0 auto;  
} 


img{
     width:191px;
     height:191px;
     display:block;
     border-radius:50%;

}
.imgWrap{
    position:relative;

}
.imgWrap:after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    opacity:0.5;
    border: 10px solid rgba(248, 248, 255, 0.7);
    border-radius:50%;
}

Check out the JS Fiddle demonstration here.

htmlcss

Answer №1

It seems like you attempted to activate the hover state on the image with this code:

img:hover{
    .. your code ...
}

However, due to the presence of a pseudo element covering it, the image cannot be hovered over.

A solution is to trigger the hover state on the pseudo element instead, using this code:

.imgWrap:hover:after{
    border-color:blue;
    background: url('INSERT PATH TO YOUR IMAGE HERE');
}

Check out a demo here

Answer №2

Implement a hover effect similar to this.

.imgWrap:hover{
    opacity:0.8;
}

Note: This code adjusts the opacity on hover, but feel free to customize it to your liking.

I hope you find this helpful.

Best regards!

Answer №3

UPDATE: If you're looking to avoid altering the image of the cat, web-tiki's method seems more efficient.

It appears that utilizing some Javascript/jQuery may be necessary, especially if you cannot directly trigger a mouse hover on the image (due to an element positioned above it).

Below is a sample code snippet:

$(".imgWrap").hover(function(){    
    $('img').toggleClass("imgHover");
    $('.imgWrap').toggleClass("imgHover");
    $('.box').toggleClass("imgHover");
});

.imgHover{
    width:300px;
    height:300px;
}

Give this a try in your JSFiddle. Make sure to include the jQuery library.

http://jsfiddle.net/52fFF/11/

In this example, I adjusted the dimensions of the Box, Circle, and image for illustration purposes.

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

Please specify the checkbox name that is required in the text field

<input type="checkbox" name="check1" id="chk1" value="10" /> Value 1 <input type="checkbox" name="check2" id="chk2" value="20" /> value 2 <input type="checkbox" name="check3" id="chk3" value="30" /> value 3 <input type="checkbox" name= ...

javascriptjqueryhtmlcheckbox

Scrolling horizontally in Bootstrap 4 is a breeze

I'm having trouble implementing a horizontal scroll for a set of cards on mobile view with @media only screen and (max-width : 480px). I've checked out various resources, such as this one, but none seem to be working for me. One possible issue co ...

htmlcssbootstrap-4horizontal-scrolling

Using the CSS to set the alt attribute and title of an image based on its file name

Is it feasible to dynamically set the ALT and title attributes of an image element to match the file name? It seems like this could potentially be achieved using the CSS content property, although I am not very familiar with the process. For example: < ...

javascriptjqueryhtmlcssw3c-validation

Is it possible to revert the text back upon double-click or when it loses focus?

When I click on a dropdown labeled 'View Capacities', the label changes to 'Hide Capacities'. I am attempting to make it change back to the original label when it is double clicked (when toggle closes) or when the user clicks elsewhere ...

javascriptjqueryhtmlcsstwitter-bootstrap

hint.css guide for inserting line breaks into hints

Is there a way to manually insert line breaks in Hint.css hints? I've attempted using <br>, \n,, and various combinations of them. I've also experimented with the following CSS properties: white-space: normal; word-wrap: break-word; ...

htmlcssline-breakshint

The Bootstrap navigation bar isn't displaying properly on mobile devices

Help! My Bootstrap navbar is not working properly on mobile view. The menu icon shows up but when clicked, no items are displayed. Here is the HTML code for my navbar: <header class="header_area"> <div class="main-menu"> ...

htmlcssbootstrap-4

Is there a way to enable hover action on an empty span element?

I am dealing with a situation where I have multiple spans, each with tooltips that should appear when the span is hovered over. However, there are times when a span may not contain any content, resulting in an area of white space that cannot trigger the to ...

htmlcssbootstrap-4

Resolving the Smooth Scrolling Problem

Here is a simplified version of what I am currently working on: Although I have managed to get the scrolling functionality to work, there seems to be an issue with transitioning from one section to another. For example, when clicking on NUMBER 3, it s ...

javascriptjqueryhtmlscrollsmooth-scrolling

Tornado: linking a URL within an external CSS stylesheet

When working with tornado's html template, it is recommended to use static_url instead of hard-coding the path for static files. For instance, <link rel="stylesheet" type="text/css" href="{{static_url("css/frontpage.css")}}"> However, I encou ...

htmlcsstornadostatic-files

Flexbox allows all elements to fall in line in a single row

I'm trying to create a basic counter program. I have placed the label and buttons inside a div container and used flexbox styling on them. However, despite setting the display of the label to block and adding a line break after it, the buttons and lab ...

cssflexbox

What causes jQuery's append function to trigger a redraw of my Div?

I have a unique function that incrementally increases the date by one day every second. Once the date matches specific dates, I aim to update my #newsDiv with extra text content. The #newsDiv will display all historical "news" and will be set to scroll to ...

javascriptjquerycss

Having issues with Jsoup parser specifically on one URL

I'm currently utilizing Jsoup to retrieve the content of a webpage and parse it. public static void main(String[] args) throws IOException { Document document = Jsoup.connect("http://www.toysrus.ch/product/index.jsp?productId=89689681").get() ...

javahtmlparsingjsoup

Chrome glitch: how to make radio buttons bigger

Hey there! I'm having a little trouble trying to increase the size of my radio button using this CSS code. It seems to work in Mozilla, but not in Chrome. .rdo { margin: 1em 1em 1em 0; transform: scale(1.3, 1.3); -moz-transform: scale(1.3, 1.3); -ms- ...

htmlcsstransform

Parent div is positioned absolutely with overflow set to hidden

I am facing a unique requirement where the parent div has an absolute position and the child div also has an absolute position. Inside the parent div, I have set overflow: hidden to hide the extra width of the child div. However, this setup is not working ...

htmlcss

Bootstrap | Problem with adapting navbar for different screen sizes

I am currently faced with an issue while creating a website using Bootstrap. Specifically, I have a prominent logo on the left side of my navbar and six navigation items on the right. When viewing the website on a smaller XS screen size, the navigation ite ...

htmlcsstwitter-bootstrapnavbar

Display the div at the top - it doesn't seem to be functioning properly in the Chrome

My div has a z-index of 99999 and is displaying correctly on Firefox and Safari. However, when testing it on Chrome, the footer does not appear as the top element. What steps should I take to ensure it is the highest element? Do I need to make any additio ...

javascripthtmlcss

The issue of Facebook login not inserting data into the MySQL database has been identified

I've been following tutorials to implement login with Facebook, and I have most of it working. However, the data is not being saved to the database. Here is the code that is currently functional: <?php require 'lib/db.php'; require &apo ...

phphtmlmysqlfacebook

The svg image could not be loaded from an external URL due to a Content Security Policy directive violation stating: "default-src 'none'"

Currently, I am working on creating an SVG that includes an image from an external URL: https://i.stack.imgur.com/4iGwt.jpg: <svg version="1.1" baseProfile="full" width="300" height="86" viewBox="0 0 300 86" preserveAspectRatio="xMinYMin meet" xmlns= ...

htmlimagesvgcontent-security-policy

Remove bulleted list from HTML using JavaScript DOM

My task involved deleting the entire "agent" array using the removeChild() function, requiring the id of a <ul> element. However, I faced an issue as I couldn't set the id for the "ul" due to using the createElement() function. //old code < ...

javascriptphpjqueryhtmlcss

Why is my column getting devoured even though it has custom content tailored to it?

In my layout, I have one column, one row, and three nested columns. Each column contains a custom-designed button instead of using the default Bootstrap button. However, there seems to be an issue where one of the columns is getting cut off. To better und ...

htmlcsstwitter-bootstrap