Skip to content

Instantly share code, notes, and snippets.

@vitkarpov
Created October 30, 2014 16:23
Show Gist options
  • Save vitkarpov/b174d0ee9020e0d1860e to your computer and use it in GitHub Desktop.
Save vitkarpov/b174d0ee9020e0d1860e to your computer and use it in GitHub Desktop.
Untitled
body {
background: lightyellow;
margin-right: 50%;
}
.img {
position: relative;
background-size: contain;
/* вычисляется из отношения сторон картинки */
padding-bottom: 62.5%;
}
.overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
cursor: pointer;
}
.img:hover .overlay {
display: block;
}
button {
position: absolute;
left: 50%;
top: 50%;
margin: -9px 0 0 -40px;
}
<div class="img" style="background-image: url('http://yandex.ru/images/today?size=2560x1600');">
<div class="overlay">
<button>Посмотреть</button>
</div>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment