Завершение изображения в css

Question

Я создаю веб-страницу для моего проекта. Я использовал изображение пополам и хочу, чтобы его симметрия, аналогичная двум, также показывалась при наведении. Я имею в виду, что, когда мы будем курсировать на контейнере, изображение будет завершено, чтобы показать полное изображение. Как мне это достичь.

#container { 
 
    height: 300px; 
 
    width: 241px; 
 
    border: 1px solid red; 
 
} 
 
img { 
 
    height: 300px; 
 
    width: 120px; 
 
    border-right: 1px dotted gray; 
 
    display:inline-block; 
 
    float:left; 
 
}

<h1 style="font-family:Algerian;">Symmetry</h1> 
 
<div id="container"> 
 
    <img src="http://i.imgur.com/qIPYs5i.jpg"> 
 
</div>

Answer 1

Вы можете сделать второй класс с :hover ключевого слова и установить background-image свойство полного изображения там.

Что-то вроде

#container:hover { 
    height: 300px; 
    width: 241px; 
    border: 1px solid red; 
    background-image: url('Your Image url') 
} 

должен сделать трюк.

Answer 2

Вы можете использовать CSS3 превращается в зеркало, что изображение, а затем использовать: Hover pseudoclass, чтобы открыть его, когда пользователь парит над контейнером:

#container { 
 
    height: 300px; 
 
    width: 242px; 
 
    border: 1px solid red; 
 
} 
 
#container:hover .second{ 
 
    display: block; 
 
} 
 
img { 
 
    height: 300px; 
 
    width: 120px; 
 
    border-right: 1px dotted gray; 
 
    display: block; 
 
    float:left; 
 
} 
 

 
.second { 
 
    transform: scale(-1, 1); 
 
    display: none; 
 
}

<h1 style="font-family:Algerian;">Symmetry</h1> 
 
<div id="container"> 
 
    <img class="first" src="http://i.imgur.com/qIPYs5i.jpg"> 
 
    <img class="second" src="http://i.imgur.com/qIPYs5i.jpg"> 
 
</div>