Create Responsive Image Decoration Using HTML And CSS


Our Restaurant

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley

Nature
Nature


Nature
Nature

Its features:

  • If you touch the image, it will expand.

  • You can add more than one image if you wish.

  • It is completly responsive.

  • You can change the font style via CSS if you want.

Try to create like yourself by following the codes below :


Step 1) Add to folder :
First make one folder and put some images that you like.
Step 2) Add to head :
<meta name="viewport" content="width=device-width, initial-scale=1">
Step 3) Add to html :
<div class="border"></div><br> <div class="three"> <h1 style="text-align:center;">Our Restaurant</h1> <p style="text-align:center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p> </div> <div class="row03"> <div class="column03" style="background-color:;"> <div class="zoom"> <img src="e.gif" alt="Nature" class="responsive" width="300" height="400"> </div> </div> <div class="column03" style="background-color:;"> <div class="zoom"> <img src="e03.gif" alt="Nature" class="responsive" width="300" height="200"> </div> <br><br> <div class="zoom"> <img src="e04.png" alt="Nature" class="responsive" width="300" height="200"> </div> </div> <div class="column03" style="background-color:;"> <div class="zoom"> <img src="e01.gif" alt="Nature" class="responsive" width="300" height="400"> </div> </div> </div> <br> <div class="border"></div>
Step 4) Add to css :
.border{ width:150px; height:5px; background-color:red; margin:auto; } .three{ width:600px; height:auto; margin:auto; } .column03 { float: left; width: 33.33%; padding: 10px; height: auto; } .row03:after { content: ""; display: table; clear: both; } .responsive { width: 100%; height: auto; } .zoom { transition: transform .2s; margin: 0 auto; } .zoom:hover { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }



Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.