CSS Image Gallery In Hindi

CSS

CSS Image Gallery In Hindi – Is Tutorial Me Ham HTML And CSS Ki Help Se Image Gallery Banana Sikhenge |

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

CSS Image Gallery In Hindi

CSS Ke Is Tutorial Me Ab Tak Hamne Dekha Tha Ki CSS Ki Help Se Kese Ham Html Elements Ko Style De Rahe The, Is Tutorial Me Ham Ek Image Gallery Banayenge |

Image Gallery In CSS In Hindi

Image Gallery Banane Ke Liye Ham Online Images pexels.com Website Se Use Karenge, Yadi Aap Apni Local Images Use Karna Chahte Ho To <img> Ke src Me Apni Images Ka Path Set Kar Skte Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
img{
	width=600px;
	height=400px;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    <img src="https://images.pexels.com/photos/1714208/pexels-photo-1714208.jpeg?auto=compress&cs=tinysrgb&dpr">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://images.pexels.com/photos/1999463/pexels-photo-1999463.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    <img src="https://images.pexels.com/photos/1999463/pexels-photo-1999463.jpeg?auto=compress&cs=tinysrgb&dpr">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://images.pexels.com/photos/1038916/pexels-photo-1038916.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    <img src="https://images.pexels.com/photos/1038916/pexels-photo-1038916.jpeg?auto=compress&cs=tinysrgb&dpr">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Output :

Is Tarah Se Ham CSS Ki Help Se Image Gallery Bana Sakte Hai , Aap Chahe Jitni Images Isme Add Kar Skte Hai |

Agar CSS Image Gallery Se Related Koi Bhi Doubt Ho To Comment Section Me Puchh Sakte Hai |

Dosto mujhe ummed hai ki aap CSS in Hindi ko acchi tarah se samanj gye honge agar aap ko ye post acchi lage to mere is website ko jarur follow kre or ha agar aap video bhi dekhna chahte hai to aap mere channel ko bhi subscribe kar sakte hai. channel ka link aapko home page par mil jayega |

2 thoughts on “CSS Image Gallery In Hindi

Leave a Reply

Your email address will not be published. Required fields are marked *