Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while displaying text crediting the artist when hovering over it.

To see how the website looks, you can visit .

This is the HTML code I've implemented:

<picture class="profile">
            <source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
            <source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
            <img src="images/everett.gif" alt="My sunshine who makes me very happy." />
        </picture>

Here is my attempt at writing the CSS:

picture:hover > .overlay {
        background-color:#000;
        opacity:0.5;
        filter: blur(8px);
        -webkit-filter: blur(8px);

I'm considering placing the <picture> within a <div> element and then applying the CSS to that. Will this maintain the image responsiveness?

htmlcss

Answer №1

Eliminate the need for the .overlay div by utilizing before and/or after pseudo elements, along with a data attribute on the picture element (view example below).

picture {
  position: relative;
}

picture:before {
  content: attr(data-author);
  display: none;
  position: absolute;
  opacity: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color:#000;
  opacity:0.5;
  filter: blur(8px);
}

picture:hover:before,
picture:hover:after {
  display: block;
}

picture:after {
  content: attr(data-author);
  display: none;
  color: white;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
<picture class="profile" data-author="More info">
            <source media="(min-width: 1200px)" srcset="images/king.jpg" alt="My fantasy self-portrait.">
            <source media="(min-width: 501px)" srcset="images/wisteria.jpg" alt="My personal game self-insert.">
            <img src="images/everett.gif" alt="My sunshine who makes me very happy." />
        </picture>

Alternatively, you can enclose it in an additional div and apply position:absolute (with values for top, right, bottom, left) to match the parent element's dimensions.

Answer №2

To create an interesting effect, you can apply a filter to blur and darken an image when hovered over.

For example:

picture:hover img {
  filter:blur(6px) contrast(40%);
}

The overlay element adds an extra layer to the design. You can achieve this with a pseudo-element or an actual div.

body {
  text-align: center;
}

picture {
  margin:1em auto;
  display: inline-block;
  position: relative;
  border:2px solid green;
}

picture::after {
  content:"Author Details";
  display: flex;
  justify-content: center;
  align-items:center;
  color:white;
  font-size:2em;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .3s ease;
}

picture:hover::after {
  opacity:1;
}

img {
  transition:all.3s ease;
  display: block;
}

picture:hover img {
  filter:blur(6px) contrast(40%);
}
<picture class="profile">
            <img src="http://www.fillmurray.com/460/300" alt="My sunshine who makes me very happy." />
        </picture>

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

How can the seating arrangement be optimized for a seating chart and what is the most effective way to transition away from a traditional table structure?

Currently, I am attempting to create a dynamic seating chart on a webpage within an asp.net-mvc site using data retrieved from a database. Initially, I used a table to organize the grid layout of rows and columns, which resembled this structure: The datab ...

jqueryhtmlcssasp.net-mvchtml-table

Using Javascript to extract a custom attribute from a button element

In my HTML, there is a button that has a custom property called data-filter-params: <button class="button" type="submit" data-filter-params="{'Type', 'Filter.Type'},{'Code','Filter.Code'}" >Filter</button&g ...

javascriptjqueryhtmlasp.net-mvc

issue with arranging content in a two-column layout with headers

Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website. I have the following specifications in mind: Header takes up 20% of the screen he ...

htmlcss

How can I retrieve a text file using an API in a Next.js application?

Is there a way to download a text file using an API in Next.js? The console.log(ninjas) function is already displaying the correct information. I have tested the API with Postman and it works perfectly. When I use GET in Postman, the same information is ...

javascripthtmlnode.jsapinext.js

Use CSS to manipulate the dimensions of an overlay

Looking for a way to ensure that the height of your overlay matches the height of your carousel, even on smaller screen sizes? The HTML code below demonstrates how to combine simple HTML with a Bootstrap carousel featuring three images, along with an overl ...

htmlcssbootstrap-4

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

cssvue.jsvuetify.js

I am in the process of creating several checkboxes and am looking to incorporate some added functionality

Currently, I am working on a project that involves creating multiple checkboxes. My goal is to implement a specific functionality where only one checkbox can be checked in each group with the correct or incorrect value. Once all groups have been selected, ...

javascriptjquerycssarrayshtml

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

javascriptjqueryhtmljsonangularjs

The challenges of utilizing breakpoints effectively within Tailwind CSS

So here's the issue. I've gone through various other queries related to this problem but haven't found a solution yet. Tailwind seems to be functioning well except for breakpoints. This is what I have in the head <meta name="viewpo ...

htmlcsstailwind-cssbreakpoints

When elements are passed through components in Next.js, their style does not get applied

I have a unique component for the hero section of every page with varying content and heights. export default function CustomHero({ height, children, }: { height: string; children: ReactNode; }) { return ( <div className={`flex flex- ...

cssreactjsnext.jscomponentstailwind-css

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

javascriptjqueryhtmlcsswordpress

What is the best way to conceal floated elements with overflow in CSS?

How can I ensure that my block container element only displays the content of block elements, cutting off any floated elements that are taller than the parent container? Applying overflow: hidden seemed like a simple solution, but it created a new block f ...

css-floatcss

Identify the Presence of Hover Functionality

For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...

javascriptjquerycss

Learn how to toggle multiple class elements with jQuery, and how to hide the ones that have

This is an example of my HTML code: <h4 class="list-group-item-heading"> @Model.Customer.FirstName @Model.Customer.LastName wrote: <span class="right"><span class="icon-file padding-right link"></span></span> </h4& ...

javascriptjqueryhtml

How can JavaScript be used to automatically send a user to a designated page based on a selected option in

I am in the process of creating a JavaScript function that redirects users based on their selection from a dropdown menu. Additionally, I need to ensure that the word "admin" is set for both the username and password fields. view image here function my ...

javascripthtmlif-statementdomauthentication

What causes the disparity in the rendering of iframe content height when using "src" compared to "srcdoc"?

After comparing the behaviors of iframes with src and srcdoc, I stumbled upon a puzzling difference: a div set to 100% height renders as the full height of the iframe when using src=[data uri], but not with srcdoc. The issue can be easily replicated with ...

htmlcssiframe

What is the best way to determine the value of margin-left in inline CSS using jQuery?

Here is the code snippet I am working with: <div class="ongoing" style="width: +728px; margin-left: +12480px"> I need to extract the value of the margin-left property for scrolling purposes. The technique I used to retrieve the width value does no ...

javascriptjqueryhtmlcss

Extract the post date/time directly from the HTML code without relying on JavaScript

I encountered an issue while attempting to store the time and date from a form into a variable. An error message indicated that the variable was unknown. Below is the code I used: HTML <div class="form-group"> <label for="dp">Departure Da ...

phphtml

What is the best way to create a dynamic text area that changes based on a dropdown selection?

I'm trying to create a feature on my form where selecting a retailer from a dropdown menu automatically generates a corresponding link next to the textbox. For example, if someone picks Best Buy, I want a link to bestbuy.com to show up immediately wit ...

phpjavascripthtmlajax

Spinner loading animation not showing correctly

Even though it shows up when I hover over and inspect, the image remains completely invisible. It's saved in the same folder and I believe all the file names are correct, but for some reason, it's just not working as expected. Any help would be g ...

javascripthtmlcssajax