Galeri efekti

Developer
Ayhan ALTINOK
Size
2,054 Kb
Views
22,264
  1. Galeri efekti Previews
  2. Galeri efekti HTML Codes
  3. Galeri efekti CSS Codes

How do I make an galeri efekti?

Galeri efekti . What is a galeri efekti? How do you make a galeri efekti? This script and codes were developed by Ayhan ALTINOK on 13 September 2022, Tuesday.

Galeri efekti Previews
IQ Test

Galeri efekti - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Galeri efekti </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="image-box-wrapper" id="image-box-wrapper"> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="http://lorempixel.com/200/150/food/1" alt="" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Başlık</h4> <p>İçerik...</p> <p><a class="more" href="#">Devamı</a></p> </div> </div> </div> <!-- `.image-box` end --> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="http://lorempixel.com/200/150/food/1" alt="" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Başlık</h4> <p>İçerik...</p> <p><a class="more" href="#">Devamı</a></p> </div> </div> </div> <!-- `.image-box` end --> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="http://lorempixel.com/200/150/food/1" alt="" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Başlık</h4> <p>İçerik...</p> <p><a class="more" href="#">Devamı</a></p> </div> </div> </div> <!-- `.image-box` end --> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="http://lorempixel.com/200/150/food/1" alt="" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Başlık</h4> <p>İçerik...</p> <p><a class="more" href="#">Devamı</a></p> </div> </div> </div> <!-- `.image-box` end --> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="http://lorempixel.com/200/150/food/1" alt="" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Başlık</h4> <p>İçerik...</p> <p><a class="more" href="#">Devamı</a></p> </div> </div> </div> <!-- `.image-box` end --> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="http://lorempixel.com/200/150/food/1" alt="" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Başlık</h4> <p>İçerik...</p> <p><a class="more" href="#">Devamı</a></p> </div> </div> </div> <!-- `.image-box` end --> <!-- `.image-box` start --> <div class="image-box"> <div class="image-container"> <img src="http://lorempixel.com/200/150/food/1" alt="" width="200" height="150"> </div> <div class="image-details"> <div class="details"> <h4>Başlık</h4> <p>İçerik...</p> <p><a class="more" href="#">Devamı</a></p> </div> </div> </div> <!-- `.image-box` end --> <div class="clear"></div>
</div>
</body>
</html>

Galeri efekti - Script Codes CSS Codes

.image-box-wrapper { width:642px; margin:50px auto;
}
.image-box { width:210px; height:160px; overflow:hidden; background-color:white; border:1px solid #ccc; float:left; margin:1px 1px; font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif; color:#333;
}
.image-container,
.image-details { height:150px; border:5px solid white; background-color:#ffc; -webkit-transition:margin-top .4s ease-out .4s; -moz-transition:margin-top .4s ease-out .4s; -ms-transition:margin-top .4s ease-out .4s; -o-transition:margin-top .4s ease-out .4s; transition:margin-top .4s ease-out .4s;
}
.image-container img { width:200px; height:150px; padding:0 0; margin:0 0; border:none; outline:none; max-width:none; max-height:none; background-color:black;
}
.image-details h4,
.image-details p { margin:0 0 .2em; padding:0 0; height:70px;
}
.image-details h4 { font-size:120%; height:auto;
}
.image-details .details { padding:10px 12px; overflow:hidden;
}
.image-details .more { color:white; text-decoration:none; display:block; text-align:center; font-weight:bold; background-color:#f9a; height:26px; line-height:26px; margin:10px 0 0;
}
.image-box:hover {border-color:#bbb}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
Galeri efekti - Script Codes
Galeri efekti - Script Codes
Home Page Home
Developer Ayhan ALTINOK
Username AyhanALTINOK
Uploaded September 13, 2022
Rating 3
Size 2,054 Kb
Views 22,264
Do you need developer help for Galeri efekti?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ayhan ALTINOK (AyhanALTINOK) Script Codes
Name
A Pen by Ayhan ALTINOK
Css3 animasyon
Akordion slayt -acordion slide
Jquery Fare Animasyonu - Jquery Mouse Animation
Css sallanan resim efekti
Css galeri
Menu
Slider
Filtre ile Arama Kutusu - Search Box with Filter
Facebook Responsive Lightbox
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!