CSS Image Formatting

Image Formatting CSS

---

<img src="girfa.jpg" style="margin-left:20px;border-radius: 8px;"/>

<img src="girfa.jpg" style="border-radius: 50%;"/>

<img src="girfa.jpg" class="thumb h" />

.thumb {

    border: 1px solid #ddd;

    border-radius: 4px;

    padding: 5px;

    margin-left:30px;

     margin-top:30px

}

img.h:hover {

    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

}

<img src="girfab.jpg" style="max-width: 100%; height: auto;"  />

Girfa : Student Help

<div class="canvas">

  <img src="girfa.jpg" alt="Norway" style="width:100%">

  <div class="container">

    <p>Girfa : Student Help</p>

  </div>

</div>

div.canvas {

  width:500px;

  background-color: white;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  margin-bottom: 25px;

}

div.container {

  text-align: center;

  padding: 10px 20px;

}

<img src="girfa.jpg" style="opacity: 0.5;" />

<img src="girfa.jpg" class="blur" />

.blur

{

-webkit-filter: blur(4px);filter: blur(4px);

}

<img src="girfa.jpg" class="sepia" />

.sepia

{-webkit-filter: sepia(100%);filter: sepia(100%);

}

<img src="girfa.jpg" class="shadow" />

.shadow

{

-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);

}

Download Source Code

Next Example