Я хочу создать наведите указатель мыши, чтобы нарисовать изображение следующим образом: В Интернете найдено много похожих примеров, но все они либо с jquery, либо с js. Я хотел бы знать, является ли это возможно сделать чисто с помощью CSS ...Наведите указатель на объект, пока наведите указатель на изображение
UPDATE: вот код найден, но он слишком велик :(
.view-content {
\t height: 330px;
}
h2.view-title {
font-size: 3rem;
font-weight: bold;
color: #7d7a7a;
text-align: center;
text-shadow: 0 0px 0px;
}
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .view-mask, .view {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view a.view-info {
display: inline-block;
text-decoration: none;
padding:0;
text-align: center;
color: white;
font-size: 1.9rem;
font-weight: 600;
vertical-align: middle;
}
.view-effect .view-mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition: all 0.3s ease-in-out;
}
.view-effect a.view-info {
position:relative;
top:-20px;
opacity: 0;
transition: opacity 0.3s 0s ease-in-out;
}
.view-effect:hover .view-mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.view-effect:hover a.view-info {
opacity:1;
transition-delay: 0.3s;
}
<div class="view view-effect">
\t \t \t \t <img src="http://storage7.static.itmages.ru/i/16/0708/h_1467979220_8325708_d41d8cd98f.png" height="200" width="300" alt=""> <p></p>
<div class="view-mask">
\t \t \t \t \t <a href="#" class="view-info">Show project</a>
\t \t \t \t </div>
</div>
Пожалуйста, предоставьте нам код, который вы сделали до сих пор. Чтобы сделать это исключительно с помощью CSS, вы можете попробовать использовать псевдо-класс ': hover', более подробно об этом здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover – Konrud
' Я бы хотел знаете, можно ли делать чисто с css ... '. Да, это возможно. Вы можете отображать/скрывать другие элементы при наведении. – Nick
да. Это возможно, но, пожалуйста, напишите полный код, который вы пробовали –