I want to transform the appearance of a card when hovering over it. I am seeking a CSS-only solution for

As a user hovers over the card, I want to change the image displayed. I attempted the following code without success:

.card {
  height: auto;
  min-width: 90%;
  background-color: white;
  margin: 20px auto 0px;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.card img:hover {
  background-image: url(images/hijab-icon-black-vector-illustration-260nw-1712786086.jpg);
  width: auto;
  height: 500px;
}
<div class="card">
  <img src="images/image-equilibrium.jpg" alt="" />
</div>

htmlcsshover

Answer №1

When utilizing the background-image method, it is recommended to apply it on the standard state rather than the :hover state. Afterwards, adjust the opacity of the image upon hovering over it.

.card {
  height: auto;
  /*min-width: 90%;*/
  background-color: white;
  margin: 20px auto 0px;
  background-image: url('https://dummyimage.com/600x400/000/fff&text=behind');
  background-size: cover;
  max-width: 500px;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.card img:hover {
  opacity: 0;
}
<div class="card">
  <img src="https://dummyimage.com/600x400/000/fff&text=front" alt="" />
</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

Maintain header's position as fixed while scrolling on mobile devices

My header has a position: fixed; property and it works fine on desktop. However, when scrolling on mobile, there is a delay in the header adjusting to my scroll position. It remains unfixed until I stop scrolling, then suddenly snaps into place. Is there ...

javascriptjqueryhtmlcssjquery-mobile

Prevent vertical scrolling on touch devices when using the Owl Carousel plugin

Is there a way to prevent vertical scrolling on Owl Carousel when dragging it horizontally on touch devices? It currently allows for up and down movement, causing the whole page to jiggle. If anyone has a solution, I can share the JavaScript file. Appreci ...

javascriptjqueryhtmlcss

How can I divide a div by utilizing word wrap?

My CSS-styled div is pretty straightforward .text { text-transform: capitalize; color: #FFFFFF; background: #918a8a; opacity: 0.6; font-size: 2em; height: 80px; width: 200px; } It creates a grey box w ...

htmlcss

Use percentages for the width in CSS and pixels for the height, ensuring that both dimensions are equal

I'm attempting to create a square that adjusts its size according to the screen size. Currently, I have the width set to 25%. Is there a way to ensure that the height remains the same length in pixels as the width? Appreciate any assistance on this ...

javascriptcsshtml

What could be causing my Flask login function to not accept my post method?

Take a look at my code snippet: @app.route("/login", methods=["GET", "POST"]) def login(): session.clear() if request.method == "GET": return render_template("login.html") if request.method == "POST": rows = User.query.filter_b ...

pythonhtmlflask

Instructions for connecting a button and an input field

How can I connect a button to an input field? My goal is to make it so that when the button is clicked, the content of the text field is added to an array (displayed below) const userTags = []; function addTags(event) { userTags.push(event.target.__ wha ...

javascripthtmlcssformsform-submit

Can we make the RegExp shorter?

I am utilizing the following RegEx pattern in a client-side validator for ASP.NET: \d{9}|A\d{8}|a\d{8} This pattern effectively identifies the desired strings, which are: 123456789 a12345678 A12345678 However, I have noticed that there i ...

javac#htmlasp.netregex

Is there a way to adjust the label elevation for a Material UI TextField component?

I am trying to enhance the appearance of a textfield label, but I am facing some challenges with my code. textStyle: { backgroundColor: '#1c1a1a', border: 0, borderRadius: 0, width: 400, height: 66, display: 'flex&a ...

javascriptcssreactjsmaterial-ui

Implementing JavaScript to assign unique IDs to several elements - a step-by-step guide

I've been struggling to find a solution to my problem despite days of research. After stumbling upon a similar Stack Overflow question (GetElementByID - Multiple IDs), I still can't seem to implement the solution into my code even after numerous ...

javascripthtmlcss

Best Practices for Structuring HTML Files

Currently, I am delving into OOP PHP without utilizing MVC architecture. The complexity of MVC is a bit overwhelming for me to grasp at the moment, and I prefer not to dive into learning an entire framework. As a result, my code tends to become disorganize ...

phphtmloopconventions

Incorrect formatting of HTML email on Outlook

Here is the code snippet I am using for an HTML email: <div style="background-color:red;max-width:600px;height:140px;margin-left:auto;margin-right:auto;"> <img src="https://via.placeholder.com/140x99" height="140" wi ...

htmlemailoutlookhtml-emailoutlook-2010

Using React Refs to Trigger the video.play() Method - A Step-by-Step Guide

Is there a way to use a ref in order to trigger video.play()? Currently encountering an error: preview.bundle.js:261916 Uncaught TypeError: _this2.videoRef.play is not a function Take a look at my component: import React from 'react'; import s ...

javascripthtmlreactjshtml5-video

Retrieve the values of multiple elements at once and utilize them individually

My goal is to extract the values of the first 5 elements with the same class separately and concurrently. For example, if the input contains: <span><div class="amount large">100</div></span> <span><div class="amount large" ...

jqueryhtmlcountelementjscript

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

javascripthtmlcsslayer

Navigating through different pages in PHP

How can I set up my php page to handle the following situations? When someone clicks on "my account", they should be directed to the login page if they are not currently logged in. If a user is already logged in and clicks on "my account," they should ...

phphtml

What's the point of specifying position relative if it's not even needed?

Why do I see many sites setting the position: relative; in block elements when they do not use position in the inner elements? Is there any other reason to set the position relative? For example: <div class="parent"> <div class="parent__contai ...

htmlcssposition

Swap the comma for a period as you type out jQuery code

Hey there, I'm trying to figure out how to use jQuery to replace a comma with a dot while typing in a text input field. Currently, my code looks like this: $(document).on('change', '.unitprice', function() { $(this).val().replac ...

javascriptjqueryhtmljquery-plugins

Create a new NVD3 graph with a vertical line added

I am working with a NVD3 graph that displays a simple data set. My goal is to draw a line over the graph in a different color (similar to a cut-off value, which will be at x=5) <meta http-equiv="content-type" content="text/html; charset=UTF8"> <s ...

htmlangularjsnvd3.js

Improper Placement of CSS in Google Chrome

I'm facing an issue with my login form that displays perfectly fine in all browsers except Google Chrome. In Chrome, it tends to get distorted more often than not. CSS * { margin: 0; padding: 0; width: auto; } body { background: #E8 ...

cssgoogle-chrome

Identifying Touch Interaction exclusively on WebGL Canvas within threejs

Currently, I am developing a threejs application that requires input from HTML buttons and utilizes Raycast Detection on touch within threeJS. The issue I am encountering is that when the user clicks an HTML button, the Raycast function is triggered as we ...

javascripthtmlmobilethree.jsreact-three-fiber