내가 사용하고 정당화 갤러리 나는 또한 이미지에 CSS 호버 효과를 사용하고, 이미지를 정당화하기 위해 라이브러리를 그 표시한다 FontAwesome 아이콘 위에 떴다.
문제는 각 이미지가 그리드에 맞도록 Justified Gallery 플러그인에 의해 지정된 크기가 다르기 때문에 아이콘이 각 이미지 위에 다른 위치에 표시된다는 것입니다.
아이콘이 각 이미지 중앙의 동일한 고정 위치에 나타나도록하고 싶습니다.
그리드 모양과 아이콘이 더 작고 큰 썸네일에 표시되는 방식은 다음과 같습니다.
JS 바이올린 https://jsfiddle.net/halnex/3shtoyzz/3/
내 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>
그리고 이것은 내 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;*/
}
자바 스크립트
$(document).ready(function() {
$("#mygallery").justifiedGallery({
rowHeight : 155,
lastRow : 'justify',
margins : 0,
captions: false
});
});
센터링 시도 display: flex
https://jsfiddle.net/ramtob/3shtoyzz/4/
나는 클래스에 추가 .overlay
하고 .hovereffect
이 플렉스 중심 코드 :
display: flex;
justify-content: center;
align-items: center;
또한 아이콘이 아닌 이미지를 절대 위치에 배치하여 아이콘의 중심을 방해하지 않도록했습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다