Seamless shifting between different content images

.tidings {
    width: 30%;
    float: left;
    margin: 0 3%;
  }

  .tidingsimg:before{
      content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
      position: relative;
      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:after{
      content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
      position:absolute;
      top: 0;margin-top: 10px;
      opacity:0;

      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:hover:after{
      opacity:1;
  }
  .tidingsimg:hover:before{
      opacity:0;
  }
<div class="tidings"><a href="http://hvalla.deviantart.com" class="tidingsimg"></a></div>

I am currently experimenting with a smooth image transition effect on my website using the CSS content: url property. While I've managed to switch between images, I'm struggling to make the change appear seamless. Is there a way to achieve this transition smoothly through the use of the content attribute?

Check out this JSFiddle for a demo of what I have implemented so far.

htmlcsstransition

Answer №1

It is recommended to utilize the "before" and "after" pseudo-elements and apply opacity and transition effects on them.

In the .tidingsimg:after class, make sure to include position:absolute and top: 0; margin-top: 10px; attributes to prevent the after style from drifting too far below the before style.

.tidings {
    width: 30%;
    float: left;
    margin: 0 3%;
  }

  .tidingsimg:before{
      content: url("https://s4.postimg.org/466igrsgt/Tidingsrune.png");
      position: relative;
      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:after{
      content: url("https://s12.postimg.org/83p4b0ubx/Tidingsrune2.png");
      position:absolute;
      top: 0;margin-top: 10px;
      opacity:0;

      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease;
  }
  .tidingsimg:hover:after{
      opacity:1;
  }
  .tidingsimg:hover:before{
      opacity:0;
  }
<div class="tidings"><a href="http://hvalla.deviantart.com" class="tidingsimg"></a></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

Is there a way to trigger a link to open in Safari when I tap on it within a UIWebView

When I click on the UIWebview, I am trying to open a link in Safari (like an ad display). The following code is what I am currently using, but I have noticed that for some links, it opens within the UIWebview instead of opening in Safari. - (BOOL)webView: ...

htmliosobjective-cuiwebviewsafari

Acquire the stripe color scheme of Bootstrap tables

I have a Razor component that populates a series of divs within a container. Is there a way to utilize the table-striped color scheme for my odd divs without replacing it entirely? Alternatively, if I create a new CSS class called "Div-Stripe-Row." Can ...

cssbootstrap-5

When you drag down on mobile Safari on an iPad, touch events may cease to fire in HTML5

When I implement event listeners to handle touch events like touchmove and touchstart document.addEventListener("touchstart", function(event){ event.preventDefault(); document.getElementById("fpsCounter").innerHTML = "Touch ...

javascriptipadhtmlios5webkit

elevate the shadow of the menu bar above the background image

How can I ensure that the drop shadow of the menu appears in front of a background image within a div? See below for my CSS code nav { width:900px; margin: 4px auto 0px 8%; font-size: 16pt; padding-bottom: 0px; -moz-box-shadow: 7px ...

htmlcssxhtml

Generate random positions for several divs using jQuery

Here is my code snippet: http://jsfiddle.net/BREvn/2/ (it's functional). However, I want each div to have a unique position coordinate. Currently, the script moves others to the place of the first one. How can I resolve this issue? I attempted using a ...

javascriptjqueryhtmlpositioneach

Establish starting dimensions and remember the previous sizes of allocations

I successfully implemented a draggable split panel using a code library from johnwalley on GitHub called https://github.com/johnwalley/allotment. My goal is to achieve the following functionalities: Clicking on Expand or collapse the allotment B should e ...

cssreactjspanel

Retrieve text from an element using jQuery when triggering "mouseenter" on a different element

Is there a way to retrieve the text from an element while simultaneously triggering a 'hover' action on another element? Here is an illustration: I am trying to gather all available colors, but the color names are only visible upon hovering ove ...

javascriptjqueryhtmlcss

Exponential calculator in Javascript

I'm working on a basic calculator project using html5, css3 and javascript. However, I've run into an issue with the exponent button not functioning properly. Here's my code snippet: <html> <head> <meta charset = "utf-8" ...

javascripthtmlcss

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

javascriptjqueryhtmlcss

Checking for duplicate entries in an array created with the Angular form builder

I am currently utilizing angular6 reactive form with form builder and form array. The issue I am encountering is duplicate subject entries from the drop down in the form array. How can I implement validation to prevent duplicate entries in the form array? ...

javascripthtmlangularangular-reactive-formsangular-formbuilder

Guide to creating jQuery event handlers for active elements

After encountering a frustrating issue with Internet Explorer where an input cursor remained visible behind a div with z-index, I came across a solution here. However, I wanted to convert the solution into jQuery code. Original JavaScript: document.query ...

javascriptjqueryhtml

The Bootstrap justify-content-around is causing the last item to be out of

My current prototype Website has this layout, utilizing justify-content-around: https://i.sstatic.net/WUJdl.jpg I am seeking a solution for when there is an odd number of cards, ensuring that the final card aligns with the rest. Is there a way to achieve ...

htmlcssbootstrap-4flexbox

What is the best way to trigger a function once another one has finished executing?

After opening the modal, I am creating some functions. The RefreshBirths() function requires the motherId and fatherId which are obtained from the getDictionaryMother() and getDictionaryFather() functions (these display my mothers and fathers on the page s ...

javascripthtmljqueryajaxbootstrap-5

Container displaying zero height due to masonry issue

Currently, I am developing a project that requires a responsive masonry layout. The container has a maximum width set to 960px, but it is supposed to adjust based on the browser's size. Each grid item has a percentage-based width (100%, 66.666666etc%, ...

jquerycssresponsive-designjquery-masonry

Ensuring consistency in aligning float elements

I've been struggling to create a concept design for my internship project. I aim to have a page with six clickable elements (images). When one is clicked, the others should disappear and the active one moves to the top. I managed to achieve this using ...

javascriptjqueryhtmlcss

CSS tooltip within the document styling

Previously, I utilized the following code: I am seeking guidance on how to position the tooltip inline (to the right) with the parent div instead of above. Thank you for reviewing For a more user-friendly version, refer to this jsFiddle link HTML: < ...

javascriptjqueryhtmlcss

linking ng-style through live html

I am encountering an issue with dynamic data stored in the database. When trying to apply a style to a div element retrieved from the server response, I am facing difficulties with implementing it using ng-style. If the data is static, everything works fi ...

javascriptcssangularjs

Grid within a grid, spanning the entire width of the screen

After taking a glance at the screenshot provided below, I am striving to achieve the design labeled as "Lg" utilizing the Grid component from Material UI. The box labeled with the number "3" has been fashioned by employing a grid configuration of 9 by 3 O ...

cssreactjsgridmaterial-ui

Is there a way to use HTML and JS to draw custom lines connecting elements?

Sorry if this question has been asked before. Is there a way to create straight lines connecting HTML elements with just HTML and JavaScript, without relying on SVG or Canvas? If so, what would be the most effective approach? ...

javascripthtml

What is the method to display a caret in regular HTML text with the use of JavaScript?

Currently, I am studying JavaScript and aiming to develop a typing game similar to typeracer.com. The goal of the game is to type accurately and quickly without errors. In this game, users input text into a box, and JavaScript then compares their inputs w ...

javascripthtml