Seeking guidance on transitioning with a :target-selector. I've searched extensively online for ways to implement the transition in my code, but I've only managed to get animations to work (which is not permitted).
Here's my HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BluShop</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header id="header">
<h1>BluShop</h1>
</header>
<section id="leftContent">
<div id="pacificrimContent">
<h2>Pacific Rim</h2>
<img src="../bilder/pacificRim.jpg">
<p>blahblah</p>
</div>
<div id="startrekContent">
<h2>Star Trek</h2>
<img src="../bilder/starTrek.jpg">
<p>blahblah</p>
</div>
<div id="worldwarzContent">
<h2>World War Z</h2>
<img src="../bilder/worldWarZ.jpg">
<p>blahblah </p>
</div>
</section>
<aside id="rightContent">
<div id="pacificrimPoster">
<a href="#pacificrimContent"><img src="../bilder/pacificRim.jpg"></a>
</div>
<div id="startrekPoster">
<a href="#startrekContent"><img src="../bilder/starTrek.jpg"></a>
</div>
<div id="worldwarzPoster">
<a href="#worldwarzContent"><img src="../bilder/worldWarZ.jpg"></a>
</div>
</aside>
<footer id="footer">
</footer>
</div>
</body>
</html>
and the CSS code:
@charset "utf-8";
/* CSS Document */
body{
margin: 0;
}
#container{
width: 960px;
height: 600px;
margin: auto;
background-color: rgb(78, 80, 85);
border: solid 1px rgb(213, 214, 215);
}
#header{
height: 60px;
background-color: rgb(66, 69, 74);
margin-bottom: 10px;
}
#header h1{
float: left;
margin: 0px 10px 0px 10px;
color: rgb(14, 177, 238);
}
#leftContent{
float: left;
position: relative;
margin: 0px 10px 10px 10px;;
height: 460px;
width: 780px;
background-color: rgb(230, 231, 232);
}
#leftContent h2{
font-size: 20px;
margin: 10px 0px 0px 10px;
}
#leftContent img{
float: left;
margin: 0px 20px 10px 10px;
width: 310px;
height: 420px;
}
#leftContent p{
margin: -4px 20px 10px 0px;
}
#pacificrimContent, #startrekContent, #worldwarzContent{
display: none;
}
#rightContent{
float: right;
width: 140px;
height: 460px;
margin: 0px 10px 10px 10px;
background-color: rgb(230, 231, 232);
}
#rightContent img{
display: block;
width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 20px
}
#pacificrimContent:target{
display:block;
position: absolute;
}
#startrekContent:target{
display:block;
position: absolute;
}
#worldwarzContent:target{
display:block;
position: absolute;
}
#footer{
height: 60px;
margin: 0;
background-color: rgb(16, 163, 210);
clear: both;
}
The images that will appear when using :target need to be hidden at first, hence why I used display: none under #pacificrimContent, etc.
I am looking to trigger a fade-in effect when #pacificrimContent appears. I've experimented with adding 'transition: all 2s fadein;' under display: none, but haven't been successful.
If someone could assist me and explain the process so I can learn from it rather than just copying and pasting, that would be greatly appreciated!
Thank you!