центр CSS в изображении наложения

Question

.image { 
 
    padding: 0px; 
 
    max-width: 200px; 
 
    max-height: 200px !important; 
 
    margin: 15px; 
 
    position:relative; 
 
    overflow: hidden; 
 
} 
 

 
.image img { 
 
    width:100%; 
 
    margin-top: 1px; 
 
} 
 

 
.image:after { 
 
    content:'x'; 
 
    font-family:Helvetica; 
 
    font-weight:900; 
 
    color: #f5f5f5; 
 
    font-size:24px; 
 
    position:absolute; 
 
    width:100%; height:100%; 
 
    top:0; right:0; 
 
    background:rgba(0,0,0,0.6); 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
    text-align: center; 
 
} 
 

 
.image:hover:after { 
 
    opacity:1; 
 
}

<div class="image"> 
 
    <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg" /> 
 
</div>

Вот скрипка моего кода: http://jsfiddle.net/9u06fbbf/

То, что я хочу, что «х», которая появляется при наведении курсора на изображение центрируется по вертикали. Я попробовал display: table-cell с вертикальным выравниванием: средний, но я просто не могу заставить его работать правильно.

Я хочу, чтобы это работало для нескольких изображений с различными размерами и пропорциями!

Любые идеи?

Answer 1

демо - http://jsfiddle.net/9u06fbbf/10/

удаления max-width и max-height

демо - http://jsfiddle.net/9u06fbbf/13/

:before используется для content:"x"

.image:before { 
    content:'x'; 
    font-family:Helvetica; 
    font-weight:900; 
    color: #f5f5f5; 
    font-size:24px; 
    position:absolute; 
    top:50%; 
    z-index:2; 
    transform:translateY(-50%); 
    width:100%; 
    text-align:center; 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 

Answer 2

Вы можете поместить его так, чтобы он был выровнен по вертикали.

.image:after { 
    content:'x'; 
    font-family:Helvetica; 
    font-weight:900; 
    color: #f5f5f5; 
    font-size:24px; 
    position:absolute; 
    top: 0; 
    width:100%; height:100%; 
    padding-top:25%; // changed from top: 0; 
    right:0; 
    background:rgba(0,0,0,0.6); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    text-align: center; 
} 

Answer 3

рабочий Скрипт; обновленный http://jsfiddle.net/9u06fbbf/15/

.image { 
    padding: 0px; 
    max-width: 200px; 
    max-height: 200px !important; 
    margin: 15px; 
    position:relative; 
    overflow: hidden; 
} 
.image img { 
    width:100%; 
    margin-top: 1px; 
} 
.image:after { 
    content:""; 
    position:absolute; 
    width:100%; 
    height:100%; 
    top:0; 
    right:0; 
    background:rgba(0, 0, 0, 0.6); 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.image:before { 
    content:'x'; 
    font-family:Helvetica; 
    font-weight:900; 
    color: #f5f5f5; 
    font-size:24px; 
    position:absolute; 
    top:50%; 
    z-index:2; 
    transform:translateY(-50%); 
    width:100%; 
    text-align:center; 
    opacity:0; 
} 
.image:hover:after, .image:hover:before { 
    opacity:1; 
} 

Ссылка для дальнейшего Vertical align anything with just 3 lines of CSS

Answer 4

Вы должны добавить ** обивка-топ: 25%; http://jsfiddle.net/9u06fbbf/9/

.image:after { 
    padding-top:25%; 
    content:'x'; 
    font-family:Helvetica; 
    font-weight:900; 
    color: #f5f5f5; 
    font-size:24px; 
    position:absolute; 
    width:100%; height:100%; 
    top:0; right:0; 
    background:rgba(0,0,0,0.6); 
    opacity:0;  
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    text-align: center; 
}