html - down - 이미지 hover 효과




세로 가리키는 콘텐츠 정렬 (4)

스택에 관한 많은 기사를 보았지만 이에 대한 해답을 찾을 수 없습니다.

이미지를 가리키면 콘텐츠를 표시하려고합니다. 나는 이것을했다. 그러나 나는 그것을 수직적으로 중심에 둘 필요가있다. 일부 블록에는 여러 줄이 생길 것입니다. 여기 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;

}

나는 flexjustify-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-->


수직으로 가운데에 표시하고자하는이 span .grid-single .grid-content span 에는 top:50%; 가 있어야합니다 top:50%; margin-top:-x; x = 스팬 높이의 절반.
그냥 당신의 경우 추가 :

.grid-single h1 {
    margin-top: 0;
}

jdfiddle


좋아요. 그래서 내 코드를 통해 작업 한 후에 어떻게해야하는지 알았습니다.

여기에서 작동하는 것을 볼 수 있습니다 : 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;
}






hover