Try It Yourself: CSS Images

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS Images Styling</title>
  <meta charset="UTF-8">
</head>
<body>

<h1>CSS Images Styling</h1>

<h2>Rounded Image</h2>
<img src="web-design.jpg" class="rounded">
<style>
.rounded{
  border-radius: 10px;
}  
</style>

<h2>Circle Image</h2>
<img src="web-design.jpg" class="circle">
<style>
.circle{
  height: 300px;
  width: 300px;
  border-radius: 50%;
}  
</style>

<h2>Image Thumbnail</h2>
<img src="web-design.jpg" class="thumb-nail">
<style>
.thumb-nail{
  padding: 10px;
  border: 1px solid #ccc; 
  border-radius: 5px;
  width: 200px; 
}  
</style>

<h2>Image on Hover</h2>
<img src="web-design.jpg" class="hover">
<style>
.hover{
  padding: 10px;
  border: 1px solid #ccc; 
  border-radius: 5px;
  width: 200px;
  cursor: pointer; 
}  
.hover:hover{
  box-shadow: 0 0 5px #333;
}  
</style>

<h2>Centered Image</h2>
<img src="web-design.jpg" class="center">
<style>
.center{
  padding: 10px;
  border: 1px solid #ccc; 
  border-radius: 5px;
  width: 200px;
  margin: auto; 
  display: block;
}  
</style>

<h2>Polaroid Image</h2>
<div class="card">
  <img src="web-design.jpg">
  <div class="text">
    Web Design
  </div>
</div>
<style>
.card {
  width: 300px;
  background-color: white;
  box-shadow: 0 4px 10px #999, 0 6px 20px #999;
}
.card img {
  width: 100%
}
.text {
  text-align: center;
  padding: 10px 20px;
}  
</style>

<h2>Transparent Image</h2>
<img src="web-design.jpg" class="opacity">
<style>
.opacity{
  opacity: 0.6;
}  
</style>

<h2>Text Over Image</h2>

<div class="img-holder">
  <img src="web-design.jpg">
  <div class="img-text">
    Text Over Image
  </div>
</div>

<style>
.img-holder{
  max-width: 320px;
  position: relative;
}  
.img-holder img{
  width: 100%;
}
.img-text{
  position: absolute;
  top: 10px;
  left: 0;
  padding: 5px 10px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.5);
  color: #fff;
}
</style>

<h2>Image Filter</h2>
<img src="web-design.jpg" class="filter">
<style>
.filter{
  filter: blur(3px);
}  
</style>

<h2>Object-fit</h2>
<img src="web-design.jpg" class="fit">
<style>
.fit{
  width: 300px;
  height: 400px;
  object-fit: cover;
}  
</style>

</body>
</html>

CSS Code

/* Write your CSS here */

CSS Images - Playground