Troubleshooting problem with CSS hover effect on background images

Can anyone assist me with creating a simple mouse hover effect on these two images? I am having trouble getting it to work.

I am looking for a fade transition to occur when the mouse is over the images. Thank you in advance!

* {
    padding: 0; margin: 0;
}

html, body { height: 100%; }

.body {
    height: 100vh;
    text-align: center;
}

.square {
    width: 100vm; height: 100vm; /* For IE9 */
    width: 100vmin;
    height: 100vmin;

    display: inline-block;
    vertical-align: middle;
    margin-top: calc((100vh - 100vmin) / 2);

    background-color: #eee;
    font-size: 0;
}

.square:before {
    content: "";
    height: 100%;
}

.square:before, .content {
    display: inline-block;
    vertical-align: middle;
}

#left-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#right-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
opacity:0;
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#right-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
opacity:0;
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:hover:after {
opacity:1;
}
#right-content:hover:after {
opacity:1;
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style_intro.css">
</head>

<body>
<div class="body">
  <div class="square">
    <div class="content">
<a href="http://www.google.com"><div id="left-content"></div></a>
<a href="http://www.yahoo.com"><div id="right-content"></div></a>
    </div>
  </div>
</div>
</body>
</html>

htmlcsstransitionmousehover

Answer №1

Utilize the content:''; in pseudo-elements to showcase the element

* {
    padding: 0; margin: 0;
}

html, body { height: 100%; }

.body {
    height: 100vh;
    text-align: center;
}

.square {
    width: 100vm; height: 100vm; /* For IE9 */
    width: 100vmin;
    height: 100vmin;
    
    display: inline-block;
    vertical-align: middle;
    margin-top: calc((100vh - 100vmin) / 2);
   
    background-color: #eee;
    font-size: 0;
}

.square:before {
    content: "";
    height: 100%;
}

.square:before, .content {
    display: inline-block;
    vertical-align: middle;
}

#left-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#right-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
opacity:0;
  content:'';
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#right-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
opacity:0;
  content:'';
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:hover:after {
opacity:1;
}
#right-content:hover:after {
opacity:1;
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style_intro.css">
</head>

<body>
<div class="body">
  <div class="square">
    <div class="content">
<a href="http://www.google.com"><div id="left-content"></div></a>
<a href="http://www.yahoo.com"><div id="right-content"></div></a>
    </div>
  </div>
</div>
</body>
</html>

Answer №2

Looks like you're almost there, just remember to include the content: ' ' property in both the ::after and ::before pseudo selectors.

* {
    padding: 0; margin: 0;
}

html, body { height: 100%; }

.body {
    height: 100vh;
    text-align: center;
}

.square {
    width: 100vm; height: 100vm; /* For IE9 */
    width: 100vmin;
    height: 100vmin;
    
    display: inline-block;
    vertical-align: middle;
    margin-top: calc((100vh - 100vmin) / 2);
   
    background-color: #eee;
    font-size: 0;
}

.square:before {
    content: "";
    height: 100%;
}

.square:before, .content {
    display: inline-block;
    vertical-align: middle;
}

#left-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#right-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:after {
    content: ' ';
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
opacity:0;
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#right-content:after {
    content: ' ';
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
opacity:0;
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:hover:after {
opacity:1;
}
#right-content:hover:after {
opacity:1;
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style_intro.css">
</head>

<body>
<div class="body">
  <div class="square">
    <div class="content">
<a href="http://www.google.com"><div id="left-content"></div></a>
<a href="http://www.yahoo.com"><div id="right-content"></div></a>
    </div>
  </div>
</div>
</body>
</html>

Answer №3

There's no need to create a complex CSS code for this. A simple :hover and background transition will suffice. Here is the revised code:

* {
    padding: 0; margin: 0;
}

html, body { height: 100%; }

.body {
    height: 100vh;
    text-align: center;
}

.square {
    width: 100vm; height: 100vm; /* For IE9 */
    width: 100vmin;
    height: 100vmin;
    
    display: inline-block;
    vertical-align: middle;
    margin-top: calc((100vh - 100vmin) / 2);
   
    background-color: #eee;
    font-size: 0;
}

.square:before {
    content: "";
    height: 100%;
}

.square:before, .content {
    display: inline-block;
    vertical-align: middle;
}

#left-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:left;
    
    transition: background-image 0.5s;
    -webkit-transition: background-image 0.5s;
    -moz-transition: background-image 0.5s;
}

#left-content:hover {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg");
}

#right-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:right;
     transition: background-image 0.5s;
    -webkit-transition: background-image 0.5s;
    -moz-transition: background-image 0.5s;
}

#right-content:hover {
background-image: url("https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg");
}
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style_intro.css">
</head>

<body>
<div class="body">
  <div class="square">
    <div class="content">
<a href="http://www.google.com"><div id="left-content"></div></a>
<a href="http://www.yahoo.com"><div id="right-content"></div></a>
    </div>
  </div>
</div>
</body>
</html>

Answer №4

make modifications strictly in the following css

#left-side:hover {
    opacity:0.3;
}
#right-side:hover {
    opacity:0.3;
}

Answer №5

Give this a shot:

You almost had it with content:'';

* {
    padding: 0; margin: 0;
}

html, body { height: 100%; }

.body {
    height: 100vh;
    text-align: center;
}

.square {
    width: 100vm; height: 100vm; /* For IE9 */
    width: 100vmin;
    height: 100vmin;
    
    display: inline-block;
    vertical-align: middle;
    margin-top: calc((100vh - 100vmin) / 2);
   
    background-color: #eee;
    font-size: 0;
}

.square:before {
    content: "";
    height: 100%;
}

.square:before, .content {
    content:"";
    display: inline-block;
    vertical-align: middle;
}

#left-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:left;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#right-content {
   background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
   background-size: cover;
   width:50vmin;
   height: 100vmin;
   float:right;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:after {
  content:"";
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
opacity:0;
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
#right-content:after {
  content:"";
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
opacity:0;
-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#left-content:hover:after{
opacity:1;
}
#right-content:hover:after{
opacity:1;
}
<div class="body">
  <div class="square">
    <div class="content">
<a href="http://www.google.com"><div id="left-content"></div></a>
<a href="http://www.yahoo.com"><div id="right-content"></div></a>
    </div>
  </div>
</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

Redirect the Submit button to the specified URL from the form element

Looking for a way to create a form with two fields: Username and Password. Upon clicking submit, the username and password should be added to the URL in a specific format. For instance: The URL structure will remain the same, only the "username_entered_i ...

javascriptphpjqueryhtml

Arrange images with haphazard placement

Can someone guide me on creating a block of images when working with an array of random items? ...

javascripthtmlcssreactjsimage

Revamped styling for responsive web design

I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this: Initially, everything seemed fine. However, upon viewin ...

csstextresponsive-designstylingtext-alignment

Stop Mat-chip from automatically inserting a row upon selection

I am working on preventing the automatic addition of a row by the mat-chip module after a single chip has been selected. Even though the max chip count is set to 1, the input remains enabled and adds a new row beneath it as if the user can still type more ...

htmlangulartypescriptangular-materialmaterial-ui

What is the best way for a client to showcase a constantly fluctuating server-side variable's value?

On my website's homepage (index.html), I want to show a dynamic server-side global variable called serverVariable. This variable is always changing based on the node.js server-side code. However, since the client doesn't know what serverVariable ...

javascripthtmlnode.js

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

javascriptjqueryhtmlcss

I'm having trouble locating the corresponding end tag for "<%". How can I resolve this issue?

Here lies the issue: <% for(let i = 0; i < <%= elements %>.length; i++){ %> <li><%= elements[i] %></li> <%}%> ...

javascripthtmlexpresstagsejs

Ensure your HTML5 videos open in fullscreen mode automatically

I managed to trigger a video to play in fullscreen mode when certain events occur, such as a click or keypress, by using the HTML 5 video tag and jQuery. However, I am now looking for a way to have the video automatically open in fullscreen mode when the p ...

javascriptjqueryhtmlvideohtml5-video

Best practices for embedding Internal CSS and rectifying missing classes in mobile view for email templates on Gmail

I am currently facing an issue with my email template. While it works perfectly fine in Outlook web and the Outlook app, Gmail web and Gmail's internal CSS strip away certain classes automatically. In an attempt to hide the pre-header on mobile devic ...

htmlcsshtml-email

Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...

cssreactjswebpacknext.jscss-houdini

I found it challenging to select a particular choice using Selenium in Python

My goal is to use Selenium and Python to select the "Yazar" option within this particular HTML tag. However, I have encountered a problem where I am unable to successfully click and choose the "Yazar" option. Can anyone provide guidance on how to achieve t ...

pythonhtmlselenium-webdriverweb-scrapingautomation

Changing the size of a responsive navigation bar with React and adjusting it based on the window.scrollY position switches between collapsed and un

I'm struggling to create a responsive navbar that automatically adjusts its size once it surpasses the height of the navbar (currently set at 80px). However, when I scroll to around the 80px mark, it starts flickering between the collapsed and expande ...

javascripthtmlcssreactjslayout

Having trouble retrieving data from the server for the POST request

I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...

javascriptjqueryhtmlajaxpost

javascript The unchecking of a checkbox is not functioning

I am facing an issue with this JavaScript code. The problem is that when I uncheck a value, it removes all the values from the result instead of removing just the specific unchecked value. Can someone please help me with this? <script> window.addE ...

javascriptjqueryhtmlcheckbox

Building an HTML Form for Requests

Having some trouble creating an HTML form, particularly with resizing the Fieldset and legend elements. As a novice programmer, I am practicing building HTML forms. My goal is to have the form adjust its size based on the window without displacing the cont ...

htmlcssformshtml-table

Is it possible to combine numerous -webkit-transition animations in my css code without using keyframes?

I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes. I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for s ...

animationcsswebkitcss-animations

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

Utilize Google Tag Manager to Safely Gather Specific Data

My current project involves capturing values from a <select> element, sending them to the Data Layer, and then forwarding them to an Analytics account via Google Tag Manager. The source code I'm trying to extract values from includes a dynamic s ...

javascripthtmlgoogle-analyticsgoogle-tag-manager

tainted ajax outcome

Check out this HTML page I am using: <html> <head> <title>AJAX Example</title> <meta http-equiv="Content-Type" content="text/html"; charset="iso-8859-1"> </head> <script language="JavaScript" src="ajaxlib.js"> ...

phphtmlajax

Navigate to the top of the page using jQuery

Attempting to implement a simple "scroll jump to target" functionality. I've managed to set it up for all parts except the "scroll to top". The jumping works based on the tag's id, so it navigates well everywhere else, but not to the very top. He ...

javascriptjqueryhtmlcss