Safely Apply Transition on Multiple Elements

HTML & CSS
1

I want to have transition on all my “a” tags, but am having some issues.

I need to include:

a, a img {transition: opacity .3s ease,color .3s ease,background-color .3s ease;}

This works:

<a href="http://www.traileraddict.com/article/ranking-christopher-nolans-movies-worst-best/">
<span class="m_name">Ranking Christopher Nolan’s Movies: Worst To Best</span>
</a>

This does not work:

<a class="ltf" href="/the-secret-life-of-pets" style="display: block; background-image: url('//cdn.traileraddict.com/content/alsolike/secret_life_of_pets.webp');">
<span class="m_name">The Secret Life of Pets</span>
</a>

If I add “a span” to the CSS list of elements to transition, the bottom starts transitioning, but the top gets the delay bug.

Cheers
Ryan

2

Define does not work?

It works for me:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<style>
a {
	display:block;
	height:100px;
	transition: opacity .3s ease, color .3s ease, background-color .3s ease;
}
a:hover {
	opacity:0.5;
	background:blue;
	color:green
}
</style>
</head>

<body>
<a class="ltf" href="/the-secret-life-of-pets" style="display: block; background-image: url('http://cdn.traileraddict.com/content/alsolike/secret_life_of_pets.webp');"> <span class="m_name">The Secret Life of Pets</span> </a> 
</body>
</html>

Maybe you were expecting something different to happen?

You won’t see a background color change because you have a background image on top of the background.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.