I've been on the hunt for a straightforward hover effect to use on images in a gallery. I'm looking for something simple that will add a slight 10px width, 40% transparency to the images.
While many tutorials show how to achieve this effect on a per-image basis, I'm searching for a class that I can easily assign to any image where needed.
Some plugins do offer this feature, but they often come with a slew of other unnecessary options, making them seem bloated.
To give an image an inset border on hover, you need to wrap it in a container element and utilize a ::after pseudo-element to apply the border effect.
.border {
display: inline-block;
position: relative;
}
.border::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: inset 0 0 0 0 rgba(255,255,255,.5);
transition: box-shadow .1s ease;
}
.border:hover::after {
box-shadow: inset 0 0 0 10px rgba(255,255,255,.5);
}
img {
display: block;
position: relative;
}<div class="border">
<img src="http://placehold.it/150" />
</div>If you want to create a cool inset effect using CSS, you can achieve this by applying a box-shadow. Here is an example:
Check out the code example here
HTML Markup:
<figure>
<img src="http://lorempixel.com/300/300/nature/" />
</figure>
CSS Styling:
figure {
display: inline-block;
box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .4);
}
figure img {
display: block;
position: relative;
z-index: -1;
}
If you want to add a hover effect to the inset shadow, you can use CSS transitions like this:
figure {
display: inline-block;
box-shadow: inset 0 0 0 10px rgba(255,255,255, 0);
transition: all .5s 0s;
}
figure:hover {
box-shadow: inset 0 0 0 10px rgba(255,255,255, .4);
}
figure img {
display: block;
position: relative;
z-index: -1;
}
The CSS code defines a white border with 40% opacity. The image has a negative z-index to ensure the inset shadow on the figure element is visible. Feel free to customize the wrapper element to suit your needs.
See the result:
I have a simple structure that looks like this: <div class="inline"> <div class="photo-group thumb_wrapper"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQYZ35nsT0CRTlGBtNmPHikH74wXBldsPe8LQYfhXnzADYo-xSU" ...
Is there a way to render a 2D SVG shape, which is flat and 100% black, in any color across various browsers? ...
I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...
I am in the process of designing a webpage for my hobby radio station. Currently, I have the artist and title displayed, but I would like to take it a step further and have the background change based on the artist playing. For example, when Phil Collins i ...
Struggling to implement CSS styles on a PHP loop: <h3 class='title'></h3> The CSS style doesn't seem to be taking effect: .title{ color : red; } I attempted surrounding the echo with <?php ?> tags and then applying ...
I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proc ...
I'm having trouble implementing a dynamic menu on my webpage using jQuery. I've tried writing the code myself but it doesn't seem to be working as expected. The structure involves three classes: .dead, which sets display: none; in CSS, .hea ...
I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...
I want to demonstrate the ability to send a message without hardcoding all messages in my frontend. I utilized existing code from this link shared by another developer. I have included the id="msg" in the input field and id="chatpanel" with class chat-pan ...
I recently followed a tutorial on how to upload custom fonts to my WordPress website, which you can find at the link below. I completed all the necessary steps, such as uploading to the ftp, modifying the header.php file to include the font stylesheet, and ...
I've been struggling to phrase this question for a while now. I'm working on a single-page e-commerce site that operates by modifying the HTML in divs and using CSS along with JQuery to show and hide those divs. My problem arises when, occasional ...
Recently delving into the world of AngularJS and I seem to be missing something. I attempted a basic CSS animation [plunker][1] but it doesn't seem to be working. Any suggestions or assistance would be greatly appreciated. Thanks in advance! [1]: htt ...
Can someone give me tips on creating a design like this? I attempted to use bootstrap to create it, but I was unsuccessful due to my lack of knowledge on how to achieve this specific background. Any guidance on the proper way to design it would be greatly ...
Either I have been designing web pages for an extensive period of time without taking a break or something truly bizarre occurred. <div style="background-color:#0F0; margin:5px; height:5px;"></div> This will generate a lengthy bar with a 5-pi ...
Hello, I am currently experimenting with the checkAll function. When I click on the checkAll checkbox, it should select all rows and change their background color accordingly. Below is the JavaScript code I am using: function checkAll(objRef) { v ...
Is there a way to create a zig-zag list where alternate list elements are right aligned while the others remain left aligned? I want it to look like this: Item1 Item2 Item3 ...
I am trying to create a textfield with a responsive height that adjusts itself based on the size of its parent grid when the browser window is resized. I have been searching for a solution and came across this helpful post on Stack Overflow about creating ...
Here's the updated version of the navigation bar: <nav class="navbar navbar-expand-md navbar-dark bg-dark static-top"> <button class="navbar-toggler" type="button" data-toggle="collapse"> ...
I've gone through all the similar examples but still struggling to find the correct solution. My issue involves a basic Side Menu that toggles upon button click. Within the menu, there is a list of checkboxes positioned absolutely with the parent con ...
I am working with a dynamic mat-table where columns are added and populated on the fly. The table headers are styled using divs and spans. My goal is to change the color of a header to black when clicked, but also un-toggle any previously selected header. ...