In: Computer Science
For all img elements create a style rule that applies a sepia filter with a value of 1. Add a black box shadow with horizontal and vertical offsets of 0 pixels and a blur radius of 20 pixels.
Create the following style rules for the five image elements:
Source Code:
<html>
<head>
<style>
#i1,#i2,#i3,#i4,#i5{
filter:sepia(1);
box-shadow: 0px 0px 20px black;
}
#i1{
transform: translateZ(-150px);
}
#i2{
transform: rotateX(90deg) translateZ(-150px);
}
#i3{
transform: rotateY(-90deg) translateZ(150px);
}
#i4{
transform:rotateY(90deg) translateZ(150px);
}
#i5{
transform:rotateX(-90deg) translateZ(-150px);
}
</style>
</head>
<body>
<div class="images">
<img src="https://androidcommunity.com/wp-content/uploads/2016/10/Google-Pixel-Sample-Photo-7-200x200.jpg" id="i1" /><br/><br/>
<img src="https://asialyst.com/fr/wp-content/uploads/2015/03/mt-sample-background-200x200.jpg" id="i2" /><br/><br/>
<img src="https://androidcommunity.com/wp-content/uploads/2019/05/Honor-20-Pro-Sample-Photo-200x200.jpg" id="i3" /><br/><br/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQhe8zaG-C4WQR9F51jhq-z8_M2pblJXEGEGA&usqp=CAU" id="i4" /><br/><br/>
<img src="https://196034-584727-raikfcquaxqncofqfm.stackpathdns.com/wp-content/uploads/2019/09/Project-Engineer-200x200.jpg" id="i5" /><br/><br/>
</div>
</body>
</html>