Ich verwende Justified Gallery Bibliothek, um die Bilder zu rechtfertigen, ich verwende auch einen CSS-Hover-Effekt auf die Bilder, die ein FontAwesome-Symbol zeigt, wenn es überlagert.Zentrieren Sie das Symbol in der Mitte eines Bildes in einem begründeten Galerie-Layout
Das Problem ist, das Symbol erscheint an einer anderen Position über jedes Bild, weil jedes Bild eine andere Dimension hat, die durch das Justified Gallery-Plugin auf das Raster angewendet wird.
Ich möchte das Symbol an der gleichen festen Position in der Mitte jedes Bildes erscheinen lassen.
So sieht das Raster aus und wie das Symbol auf einer kleineren und größeren Miniaturansicht angezeigt wird.
JS Fiddlehttps://jsfiddle.net/halnex/3shtoyzz/3/
Hier ist mein HTML
<div id="mygallery" class="global-height scrollable">
<div class="hovereffect">
<img alt="Title 1" src="assets/images/posts/thumbs/post-1.jpg"/>
<div class="overlay">
<a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
</div>
</div>
<div class="hovereffect">
<img alt="Title 1" src="assets/images/posts/thumbs/post-2.jpg"/>
<div class="overlay">
<a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
</div>
</div>
<div class="hovereffect">
<img alt="Title 1" src="assets/images/posts/thumbs/post-3.jpg"/>
<div class="overlay">
<a class="info" href="#"><i class="fa fa-info-circle fa-3x" style="color: white;"></i></a>
</div>
</div>
</div>
Und das ist mein CSS
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.7);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(48, 152, 157, 0.1);
}
.hovereffect img {
display: block;
position: relative;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translateY(45px);
-ms-transform: translateY(45px);
transform: translateY(45px);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover h2 {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
margin: 100px 50px;
}
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.hovereffect a.info:hover {
/*box-shadow: 0 0 5px #fff;*/
}
Die Javascript
$(document).ready(function() {
$("#mygallery").justifiedGallery({
rowHeight : 155,
lastRow : 'justify',
margins : 0,
captions: false
});
});
Der Code, den Sie nicht das Bild zur Verfügung gestellt überein. https://jsfiddle.net/azizn/trgLLr5h/ – Aziz
Es tut mir leid, ich habe vergessen, das Javascript hinzuzufügen. Ich habe meinen Beitrag bearbeitet. Sie müssen die Justified Gallery-Bibliothek einschließen. – Halnex