CSS Style Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Images</title>
<style>
body{
margin: 25px;
margin-bottom: 200px;
}
img.round{
border-radius: 50%;
}
img.round:hover {
box-shadow: 0px 0px 8px 10px skyblue;
}
a img.thumbnail {
/* border: 1px solid #ddd; */
border-radius: 10%;
padding: 5px;
width: 180px;
}
a img.thumbnail:hover {
box-shadow: 0 0 2px 2px rgba(0, 140, 186, 0.5);
}
img.responsive {
max-width: 100%;
height: auto;
}
img.center {
margin: auto;
display: block;
width: 50%;
}
div.polaroid {
margin: auto;
width: 50%;
background-color: white;
box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.2),0 6px 8px 0px rgba(0, 0, 0, 0.19);
/* margin-bottom: 25px;
margin-left: 100px; */
}
/* div.polaroid img {
margin-left: 270px;
} */
div.p{
text-align: center;
padding: 10px 20px;
margin: 25px;
}
div.transparent {
position: relative;
}
div.transparent img{
opacity: 0.5;
}
div.leftbottom {
font-size: xx-large;
position: absolute;
left: 10px;
bottom: 56px;
}
div.lefttop {
font-size: xx-large;
position: absolute;
left: 10px;
top: 16px;
}
div.rightbottom {
font-size: xx-large;
position: absolute;
right: 10px;
bottom: 56px;
}
div.righttop {
font-size: xx-large;
position: absolute;
right: 10px;
top: 16px;
}
div.centertxt {
font-size: xx-large;
position: absolute;
/* right: 348px;
top: 248px; */
right: 50%;
top: 50%;
transform: translate(50%,50%);
text-align: center;
}
.blur {
filter: blur(2px);
}
.brightness {
filter: brightness(40%);
}
.contrast {
filter: contrast(240%);
}
.greyscale {
filter: grayscale(100%);
}
.huerotate {
filter: hue-rotate(250deg);
}
.invert {
filter: invert(90%);
}
.opacity{
filter: opacity(40%);
}
.saturate {
filter: saturate(5);
}
.sepia {
filter: sepia(75%);
}
.shadow {
filter: drop-shadow(3px 8px 18px green);
}
.imgcontain {
position: relative;
width: 50%;
margin: auto;
}
.imgcontain img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
top: 0;
left: 100%;
right: 0;
opacity: 0;
width: 0;
/* height: 0; */
overflow: hidden;
transition: 1.5s ease;
background-color: rgb(5, 119, 233);
}
.imgcontain:hover .overlay {
width: 100%;
opacity: 1;
left: 0;
transition: 1.5s ease;
}
.overlaytxt {
position: absolute;
color: white;
white-space: nowrap;
font-size: 20px;
top: 50%;
left: 50%;
/* overflow: hidden; */
transform: translate(-50%,-50%);
}
.overlay1 {
opacity: 0;
transition: 1.5s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.imgcontain:hover img {
opacity: 0.3;
}
.imgcontain:hover .overlay1 {
opacity: 1;
}
.fadetxt {
background-color: green;
color: white;
font: size 20px ;
padding: 16px 32px;
}
.flip:hover {
transform: scaleX(-1);
margin: auto;
width: 50%;
}
.responsive {
/* width: 74.9999%; */
width: 100%m;
float: left;
padding: 0 6px;
}
/* @media only screen and (max-width: 700px;) {
.responsive {
width: 49.9999%;
}
}
@media only screen and (max-width: 500px;) {
.responsive {
float: left;
width: 100%;
}
} */
.resp1 {
border: 2px solid black;
width: 300px;
float: left;
margin-left: 10px;
}
.resp1 img {
width: 100%;
}
.rt1 {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<p>Use border radius to create rounded images.</p>
<img src="https://www.freshboo.com/wp-content/uploads/2014/06/Cool-Wallpapers.jpg" alt="Google search" class="round">
<div>
<h2>Thumbnail Image as link</h2>
<a href="https://wallpaperheart.com/wp-content/uploads/2018/04/abstracts-wallpaper-cool-background-images.jpg" target="_blank" >
<img src="https://wallpaperheart.com/wp-content/uploads/2018/04/abstracts-wallpaper-cool-background-images.jpg" alt="Google kar" class="thumbnail" width="500px">
</a>
</div>
<div>
<h2>Responsive Image</h2>
<img src="https://images.hdqwalls.com/wallpapers/phoenix-the-red-bird-4k-i4.jpg" alt="Google" class="responsive">
</div>
<!-- Centered -->
<div>
<h2>Image in Center</h2>
<img src="https://www.pxwall.com/wp-content/uploads/2019/04/4K-Phoenix-HD-Wallpapers.jpg" alt="" class="center">
</div> <br><br>
<!-- Polaroid /Cards like images -->
<div class="polaroid">
<img src="https://wallpaperboat.com/wp-content/uploads/2020/04/phoenix-wallpaper-download-full-13.jpg" alt="" style="width: 100%;">
<div class="p">
A Phoenix Fire
</div>
</div>
<!-- Tranparent Images with text aligned on them -->
<div class="transparent">
<img src="https://wallpaperboat.com/wp-content/uploads/2020/04/phoenix-wallpaper-download-full-13.jpg" alt="" style="width: 100%;">
<div class="lefttop">
A Phoenix Fire
</div>
<div class="leftbottom">
A Phoenix Fire
</div>
<div class="righttop">
A Phoenix Fire
</div>
<div class="rightbottom">
A Phoenix Fire
</div>
<div class="centertxt">
A Phoenix Fire
</div>
</div> <br><hr><br>
<h2>Image with filter effects</h2>
<div class="filters">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="normal">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="blur">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="brightness">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="contrast">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="greyscale">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="huerotate">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="invert">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="opacity">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="saturate">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="sepia">
<img src="https://avante.biz/wp-content/uploads/Nature-Backgrounds-Image/Nature-Backgrounds-Image-011.jpg" width="300px" height="auto" alt="Nature-Backgrounds-Image" class="shadow">
</div>
<!-- Image Hover Overlay -->
<br><br>
<div class="imgcontain">
<img class="myimg" src="https://cutewallpaper.org/21/cool-nature-backgrounds/Cool-Nature-Desktop-Backgrounds-57-images-DodoWallpaper..jpg" alt="Google">
<div class="overlay">
<div class="overlaytxt">
Hello World!
</div>
</div>
</div>
<br> <br>
<div class="imgcontain">
<img class="myimg" src="https://selfgrowth.info/photos/cool-nature-pictures-without-text/best-nature-wallpapers-without-copyright2784.jpg" alt="Google">
<div class="overlay1">
<div class="fadetxt">
Hello World!
</div>
</div>
</div> <br> <br>
<hr>
<div >
Hovr on the image below and check it make it as a flip <br>
<img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" width="50%" alt="Google" class="flip">
</div>
<div class="responsive">
<div class="resp1">
<img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
<div class="rt1">This is a responsive image gallary.</div>
</div>
<div class="resp1">
<img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
<div class="rt1">This is a responsive image gallary.</div>
</div>
<div class="resp1">
<img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
<div class="rt1">This is a responsive image gallary.</div>
</div>
<div class="resp1">
<img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
<div class="rt1">This is a responsive image gallary.</div>
</div>
<div class="resp1">
<img src="https://cdn.wallpapersafari.com/41/9/cE1nV0.jpg" alt="">
<div class="rt1">This is a responsive image gallary.</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment