html - down - 이미지 hover 효과
세로 가리키는 콘텐츠 정렬 (4)
나는 flex 와 justify-content:center; 사용하여 시도 할 것이다 justify-content:center; align-items:center; :
.grid-wrapper {
width: 100%;
height: auto;
background-color: #ffffff;
-webkit-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
}
.grid-single {
width: 25%;
height: auto;
margin-right: -5px;
display: inline-block;
border: 1px solid #e0e3e6;
position: relative;
}
.grid-single h1 {
font-family: 'montserratlight';
font-size: 25px;
line-height: 30px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
.grid-single img {
width: 100%;
height: auto;
margin-bottom: -5px;
}
.grid-single .grid-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #1ABC9C;
opacity: 0;
transition: opacity 0.1s;
text-align: left;
}
.grid-single .grid-content span p {
font-family: 'montserratlight';
font-size: 14px;
line-height: 21px;
color: #ffffff;
margin-bottom: 15px;
letter-spacing: 0px;
}
.grid-single .grid-content span p strong {
color: #a1cc3a;
margin-bottom: 4px;
}
.grid-single:hover .grid-content {
opacity: 1;
display: flex;/*add flex*/
justify-content: center;/*add this*/
align-items: center;/*add this*/
}
.hover-button {
display: inline-block;
width: auto;
height: 40px;
background-color: #2C3E50;
padding: 0px 20px;
font-family: 'montserratlight';
font-size: 15px;
line-height: 40px;
color: #ffffff;
}
.grid-content span {
border: solid 1px;
}<div class="grid-wrapper">
<div class="grid-single">
<img src="http://placehold.it/400x400">
<div class="grid-content"> <span>
<div class="hover-content">
<h1>QDeck</h1>
<div class="hover-button">More Info</div>
</div>
</span>
</div>
</div>
<!--Close Grid Single-->
</div>
<!--Close Grid Wrapper-->스택에 관한 많은 기사를 보았지만 이에 대한 해답을 찾을 수 없습니다.
이미지를 가리키면 콘텐츠를 표시하려고합니다. 나는 이것을했다. 그러나 나는 그것을 수직적으로 중심에 둘 필요가있다. 일부 블록에는 여러 줄이 생길 것입니다. 여기 JSFiddle을 만들었습니다 : https://jsfiddle.net/wkmepjnk/
어떤 도움이라도 좋을 것입니다! 고맙습니다
내 HTML은 :
<div class="grid-wrapper">
<div class="grid-single">
<img src="images/qdeck-logo.png">
<div class="grid-content">
<span>
<div class="hover-content">
<h1>QDeck</h1>
<p>Q-Deck® decking or deckboards are available in four standard timber profiles, two anti-slip resistant timber profiles known as Q-Grip® and a composite profile in a range of colours known as Q-Deck Twinson.</p>
<div class="hover-button">More Info</div>
</div>
</span>
</div>
</div>
<!--Close Grid Single-->
</div>
<!--Close Grid Wrapper-->내 CSS :
.grid-wrapper {
width:100%;
height:auto;
background-color:#ffffff;
-webkit-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
}
.grid-single {
width:25%;
height:auto;
margin-right:-5px;
display:inline-block;
border:1px solid #e0e3e6;
position: relative;
}
.grid-single h1 {
font-family: 'montserratlight';
font-size:25px;
line-height:30px;
color:#ffffff;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:10px;
}
.grid-single img {
width:100%;
height:auto;
margin-bottom:-5px;
}
.grid-single .grid-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #1ABC9C;
opacity: 0;
transition: opacity 0.1s;
text-align:left;
}
.grid-single .grid-content span {
display: block;
position:absolute;
top:10%;
left:10%;
width:80%;
height:auto;
text-align:center;
}
.grid-single .grid-content span p {
font-family: 'montserratlight';
font-size:14px;
line-height:21px;
color:#ffffff;
margin-bottom:15px;
letter-spacing:0px;
}
.grid-single .grid-content span p strong {
color:#a1cc3a;
margin-bottom:4px;
}
.grid-single:hover .grid-content {
opacity: 1;
}
.hover-button {
display:inline-block;
width:auto;
height:40px;
background-color:#2C3E50;
padding:0px 20px;
font-family: 'montserratlight';
font-size:15px;
line-height:40px;
color:#ffffff;
} 수직으로 가운데에 표시하고자하는이 span .grid-single .grid-content span 에는 top:50%; 가 있어야합니다 top:50%; margin-top:-x; x = 스팬 높이의 절반.
그냥 당신의 경우 추가 :
.grid-single h1 {
margin-top: 0;
}좋아요. 그래서 내 코드를 통해 작업 한 후에 어떻게해야하는지 알았습니다.
여기에서 작동하는 것을 볼 수 있습니다 : https://jsfiddle.net/x7s6f9jm/
나는 이제 div에서 원하는 텍스트의 길이를 가질 수 있으며 멋지게 들어 맞습니다.
내 CSS를 변경했습니다 :
.grid-single .grid-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #1ABC9C;
opacity: 0;
transition: opacity 0.1s;
text-align:left;
}
.grid-single .grid-content span {
display: table;
position:absolute;
left:10%;
width:80%;
height:100%;
text-align:center;
}
.hover-content {
display:table-cell;
background-color:#ff6600;
vertical-align:middle;
}everyones 도움 주셔서 감사합니다!
확장 된 텍스트에 맞게 조정하는 방법이 있습니다. 데모를 시도했지만 설정이 약간 복잡하므로 처음부터 빠른 아이디어를 얻으려고합니다. 중요한 것은 display: table; 부모 및 display: table; cell; vertical-align: middle; display: table; cell; vertical-align: middle; 아이에게.
http://codepen.io/anon/pen/bVzZEL
<div class="wrapper">
<img src="http://placehold.it/300x200" alt="" />
<div class="overlay">
<h3>Great Title</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis totam deleniti.</span>
<button class="btn btn-primary">View</button>
</div>
</div>
.wrapper{
display: table;
width: 300px;
height: 200px;
}
.overlay{
display: none;
vertical-align: middle;
width: 300px;
height: 200px;
background: #EEE;
text-align: center;
}
.overlay .btn{
margin-top: 5px;
}
.overlay h3{
margin-top: 0;
}
.wrapper:hover img{
display: none;
}
.wrapper:hover .overlay{
display: table-cell;
}