All geek questions in one place

Why doesn't another CSS transition image source work when it hangs?

I have a <a> tag that I want to change the image source to another image source when I hover over it, having the transition effect on the image. The transition works with the background-image property for the <div> , but not with the content property for the <img> .

So far this is what I have:

 .topLogo { height: 64px; content: url(image1.png); transition: 0.2s; } .topLogo:hover { height: 64px; content: url(image2.png); }
+5
source share
2 answers

I believe that content: is for content between tags. This does not work for <img> because there is no closure </img> .

Cannot change HTML attributes using CSS. You can use javascript / jquery. I have a feeling that you do not want this.

Since you already use CSS to set the URL, why not use an empty <span> or <div> instead of <img> ?

 <span class="topLogo"></span> <style> .topLogo:before { height: 64px; content: url('image1.png'); transition: 0.2s; } .topLogo:before:hover { height: 64px; content: url('image2.png'); } </style>
+1
source

Instead of using

 content: url('image1.png');

try it

 background-image: url('image.png');

Here is a good site to learn more http://www.corelangs.com/css/box/hover.html

+1
source

Source: https://habr.com/ru/post/1234494/

More articles:


All Articles