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

Resetting the countdown timer is triggered when moving to a new page

In my current project, I am developing a basic battle game in which two players choose their characters and engage in combat. The battles are structured into turns, with each new turn initiating on a fresh page and featuring a timer that counts down from ...

javascripthtml

Revamp the website's design

I am looking to revamp the color theme of my website with just a click of a button. Can someone provide me with a link to a reference website where I can get some inspiration? ...

javascriptcssajax

Having Multiple Login Forms on a Single Page

I have encountered an issue with my login form code. It works perfectly as a single form, but I need to have 20 of these forms on one page. Despite my efforts to duplicate the code for each new form and adjusting the IDs, I am unable to make more than one ...

javascriptjqueryhtmlformsauthentication

Unable to replicate the functionality of the tab key using jQuery for the enter key

How can I focus on the first input ('Qtd on the table') after pressing enter on the 'Buscar' input? I've tried various solutions like $(this).nextAll('input').first().focus(); $(this).next('input:text').focus ...

javascriptjqueryhtml

What could be the reason for the navigation bar menu items not showing up in the sample application of the twitter.bootstrap.mvc4 package?

After setting up a new MVC4 web application project in VS2012, I decided to add the http://www.nuget.org/packages/twitter.bootstrap.mvc4.sample/ nuget package. However, upon running the sample application, I encountered an issue where the navigation menu i ...

c#cssasp.net-mvcasp.net-mvc-4twitter-bootstrap

Images that dynamically adjust within the confines of a single div

My issue involves a simple script that includes two responsive images. When the window is minimized, the images adjust accordingly. However, when I place both images within the same div like this: <div class="wrapper"> <div class="block"&g ...

htmlcssresponsive-images

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

htmlangularangular2-template

What is the best way to define relative paths for content like CSS files?

Whenever I link to a file, I always find myself having to include the entire absolute path like this <link rel="stylesheet" type="text/css" href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" /> I want to simplify it to ...

htmlcss

How can I include inline CSS directly within a string instead of using an object?

Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...

javascriptcssnext.jssassnext.js13

Is there a way to rearrange the tabs so that the first tab is at

Is there a way for me to align with the others without being stuck below #first_tab in the code? I'm having trouble figuring it out on this website: Your assistance would be greatly appreciated! Thank you in advance! CSS Code: #first_tab { ...

htmlcss

How can I place my container above my header in the layout?

I'm facing difficulty positioning the container above my header. Here is an example of what I am aiming for: No matter what I attempt, strange occurrences like the NAV disappearing or divs overlapping keep happening. HTML: <!DOCTYPE html PUBLIC ...

htmlcss

Maintaining active navigation state in JQuery/JavaScript after clicking a link: tips and tricks

While many resources discuss adding the active class to a nav link using jquery, there is less information on maintaining the active state after the nav link has been clicked. After experimenting with code from various sources, I have attempted to set ses ...

javascriptjqueryhtmlcss

Exploring the functionality of v-chips within a v-text-field

I am trying to implement a search text field using vuetify's v-text-field, and I want to display the user input in a chip (such as v-chip or v-combo-box). However, v-text-field does not seem to support chips based on the documentation. Is there a work ...

cssvue.jsvuetify.js

Change the css code to override the color of the background material

Hey there, I'm facing an issue with overriding the background color of a material element. I've tried several methods but can't seem to get it to change. After inspecting the element on the web browser, I found the CSS code that controls th ...

cssmaterial-ui

Determine the height of a Bootstrap 4 row based on a specific column, rather than the tallest

I am facing an issue with a row that contains two columns. The first column has content that should be visible without overflowing, while the second column includes a long list that needs to be scrollable within the row. The challenge with responsive desi ...

csstwitter-bootstrapbootstrap-4overflow

The method to extract data from a <td> element using BeautifulSoup

There is a page I'm working with that contains tables in its source code: <td class="ng-binding">9:20 AM</td>, <td class="ng-binding"><span class="ng-binding" ng-bind-html="objFlight.flight.stat ...

pythonhtmlbeautifulsouphtml-tablehtml-parsing

Show the attribute of an element in a pop-up window

I have a modal from ngx-bootstrap that I want to display in there a property of my object let's say the name: public students = [ { id: 1, name: 'lorem'} In this button that is common for all entries in the table (each row has this butt ...

htmlangulartypescript

Incorporating JSTree Into Your Website's Heading: A Step-By-Step

I'm in search of a way to integrate the following code snippet as a JSTree into the heading section of a webpage, depicted below: <div id="jstree"> <ul> <li>Core 1 <ul> & ...

javascripthtmljsontreejstree

Font and div placement varies on a mac within a WordPress environment

www.oihanevalbuenaredondo.be After styling my post titles in CSS using font-family: adobe arabic, I noticed that while they display correctly on my Windows machine, they appear in a basic font on Mac OS, Safari specifically. Why is it that Safari cannot r ...

htmlcsswordpressfontswidget

Ensuring proper alignment between labels and input

How can I align a label and a range input field on the same line? I have tried using display: inline-block, but it does not seem to work. There doesn't appear to be any conflicting styles, and all sources indicate that this approach should be effect ...

htmlcssformsinput