1st problem: The text overlay is displayed when i hover on the image, but i want that the overlay would be displayed when i hover on the span which has the "point" class, how to make it?
2nd problem: The text overlay isn't responsive, it doesn't fit on the image size and i want that when i resize my image the text overlay would resize with the image, how can i make it?
I would be thanful for a javascript, bootstrap, css or a different answer!
Demo: http://jsfiddle.net/0qgcn2uu/9/
HTML:
<span class="point"></span>
<div class="caption">
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://localhost/wp-content/themes/twentyfifteen/images/velveti-grid-item-text-1.png">
</a>
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content:' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
/* This block of code is working. When i hover on my img, it gets the overlay
.caption:hover::before {
background: rgba(248, 214, 215, .5);
}
*/
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
z-index: 1;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
To solve 1st problem you need to change:
.caption:hover .caption__overlay {
To:
.point:hover + .caption .caption__overlay {
And the 2nd problem is solved adding:
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
DEMO
Related
I am trying to place an image(which is a close button) on iframe at the top-right corner, the iframe and image are loaded from js function in angular, I have placed it correctly by some CSS but the issue is when the screen is responsive or on the tab or mobile view it doesn't appear in the correct place
Below is the Html code:
<div style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
position: absolute;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
top: 40px;
left: 50%;
margin-left: -200px;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 23% !important;
left: 48% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
margin-left: 192px;"
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
The image should be placed at the marked position even if the screen gets minimized or maximized the image should be placed at the same position.
here is how it should look
but when I reduce the screen to 75%
this is how it looks
I am able to fix it for each screen but still when the screen gets minimized or maximized position is not placed correctly
here is parent of the element
If you add a div that wraps the 2, you can position that using flex in relation to your to div like so:
<div style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
">
<div style="position: relative; max-width: 50%">
<iframe style="
display: inherit;
z-index: 10001;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 0px;
right: 0px;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
</div>
Alternatively, positioning the wrapping element itself which means you don't have to add a new div, see below. The disadvantage of this is that there's then space not covered by the div itself and so whatever's underneath then shows through.
<div style="
position: fixed;
width: 50%;
height: 100%;
top: 0px;
left: 25%;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
background-color: rgb(255, 255, 255);
width: 100%;
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 10px;
right: 10px;
z-index: 99999999;
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
The positioning of the two elements (iframe and img) is pretty straightforward as we know the width of the iframe (it is picking up the default which is set at 300px by browsers see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe ).
However it is rendered somewhat complex by the rather strange set of styles applied inline to the iframe and (worse) to the img where a couple are set !important and therefore not overwritable by our own CSS.
This snippet just gets rid of all the inline styling on those two elements using Javascript and starts again.
It positions each element independently. The iframe is centered and set at 40px from the top of its positioned parent. The img is positioned to just after the right hand edge of the iframe, and then transitioned back by half its width and height to get the overlap.
<!doctype html>
<html>
<head>
</head>
<body>
<div id="GlobalPayments-overlay-02d30efa" style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
position: absolute;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
top: 40px;
left: 50%;
margin-left: -200px;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 23% !important;
left: 48% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
margin-left: 192px;" id="close-overlay" " src="assets/images/pink_hair_sml.png " />
</div>
<style>
body {
width: 100vw;
}
#GlobalPayments-overlay-02d30efa {
--iframeW: 300px; /*the defaults set by browsers https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe*/
--iframeH: 150px;
}
#GlobalPayments-overlay-02d30efa iframe {
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
background-color: rgb(255, 255, 255);
top: 40px;
margin: 0;
padding: 0;
left: calc(50% - (var(--iframeW) / 2));
position: absolute;
}
#GlobalPayments-overlay-02d30efa img {
position: absolute;
top: 40px;
left: calc(50% + (var(--iframeW) / 2));
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
width: 16px;
height: 16px;
}
</style>
<script>
const iframe = document.querySelector('iframe');
const img = document.querySelector('img');
iframe.style = '';
img.style = '';
</script>
</body>
After all your comments that finally explains that you cannot change the HTML code we start to understand what you need!
You have to override the inline CSS rules with the help of the !important operator. The big problem will be on the close image
because it already has some !important rules in the inline CSS, which is bad news for us... But you can use JavaScript to correct
the horrible HTML generated.
For the CSS itself, I prefer putting all items in position fixed and use % to position them.
The close image should not be set from the left but from the right. But as said before this will be tricky because the inline CSS already has some !important rules. But at least we can remove the float and left margin. Finally, after overriding during the battle, the simpliest was just to remove the inline style attribute with JS.
You'll have to find if you can hook somewhere in the JS library. If you cannot then you could run the JS every half a second until it finds the close image, like I did (but it's not a nice solution).
By the way, it would be good to set the image size in the CSS so that it displays at the correct place and size before the image itself is downloaded.
/*
In your case, you'll have to run this once the
iframe is visible. See if you can hook somewhere.
Look at the JS library you are using or if you can
then replace it by one not generating all this
horrible HTML with inline styles.
Here, just for the demo, I finally find a solution
to run it once the document is loaded and also each
time a change is detected, typically the case of the
user clicking on a button or link to display the
iframe overlay. This avoids the solution of a timer
running all the time.
*/
/**
* Correct the close button of the iframe displayed on overlay.
*/
function correctIframe() {
let closeImg = document.querySelector('#iframe-overlay ~ img:not(.cleaned)');
if (closeImg) {
closeImg.setAttribute('style', '');
closeImg.setAttribute('class', 'cleaned');
}
}
// Once the document is loaded we can try to see if there's
// already an iframe overlay to correct it.
document.addEventListener('DOMContentLoaded', correctIframe);
// Each time the document changes (typically if some JS does
// something such as triggering an Ajax call, loading new HTML,
// or simply displaying the iframe overlay) then we also have
// to correct it.
let domInsertionObserver = new MutationObserver((mutation) => {
correctIframe();
});
domInsertionObserver.observe(document, { childList: true });
#iframe-overlay {
z-index: 1000 !important;
position: fixed !important;
top: 10% !important;
left: 10% !important;
width: 80% !important;
height: 80% !important;
margin: 0 !important;
}
/* An image tag just after the iframe. */
#iframe-overlay ~ img {
visibility: hidden; /* To avoid seeing it at bad position. */
z-index: 1001 !important;
position: fixed !important;
/*
We cannot override the left attribute
because it has !important in the inline
rule! Bad! We cannot override the transform
either! Even worth! So JavaScript can only
save us by deleting the inline style attribute.
*/
top: 10% !important;
right: 10% !important;
/* Adjust to the image size to avoid image
being resized during the download step. */
width: 30px;
height: 30px;
/* Move half of the image size to right and down. */
transform: translate(50%, -50%) !important;
}
#iframe-overlay ~ img.cleaned {
visibility: visible;
}
<div style="
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
transition: all 0.3s ease-in-out 0s;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
">
<iframe style="
display: inherit;
z-index: 10001;
position: absolute;
transition: transform 0.5s ease-in-out 0s;
transform: scale(1);
opacity: 1;
top: 40px;
left: 50%;
margin-left: -200px;
background-color: rgb(255, 255, 255);
" src="test.html" id="iframe-overlay" title="iframe">
</iframe>
<img style="
transition: all 0.5s ease-in-out 0s;
opacity: 1;
float: left;
position: absolute;
top: 23% !important;
left: 48% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999999;
margin-left: 192px;"
id="close-overlay"
" src="assets/images/pink_hair_sml.png" />
</div>
I really like the effect of clicking on the search box and the search page coming up and the normal page fades out. How can I replicate this? Is this CSS3 only?
https://atmospherejs.com/
You can do that with CSS only and here is one way.
In this sample I used 2 radio inputs to keep track of whether to show the search box or not.
html, body {
margin: 0;
height: 100%;
}
#shide, #sshow {
display: none;
}
.container {
width: 100%;
height: 100%;
background:url('http://lorempixel.com/1024/600/city/9/') no-repeat;
background-size:cover;
transition: transform .6s ease-out, opacity .6s ease-out;
z-index: 1;
}
.showsearch{
position: absolute;
top: 25px;
right: 25px;
background-color: rgba(255,255,255,0.9);
color: #F00;
font-size: 20px;
border-radius: 5px;
padding: 10px 25px;
cursor: pointer;
}
.searchbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255,255,255,0.9);
transition: opacity .5s ease-in;
}
.searchbox .close{
position: absolute;
top: 25px;
right: 25px;
width: 60px;
height: 60px;
cursor: pointer;
}
.searchbox .close:before,
.searchbox .close:after {
content: ' ';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
transform: rotate(45deg);
background: #000;
}
.searchbox .close:after {
transform: rotate(-45deg);
}
.searchbox > div {
position: relative;
top: 46%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.searchbox > div > div {
font-size: 24px;
}
#sshow:checked ~ .searchbox {
opacity: 1;
z-index: 2;
}
#sshow:checked ~ .container {
opacity: 0.4;
transform: scale(0.9, 0.9);
}
<input type="radio" name="search" id="sshow">
<input type="radio" name="search" id="shide">
<div class="searchbox">
<label class="close" for="shide"></label>
<div>
<div>Search box</div>
<input type="text" class="field">
</div>
</div>
<div class="container">
<label class="showsearch" for="sshow">Search</label>
</div>
Yes this is css along with a little bit of jquery you can make this happen. You will need to wrap your body content in a wrapper so you can scale it with css. Then use jquery toggleClass to give the body a class of something like search-open. Then you can use transitions for the rest like so:
Here is a fiddle demo Fiddle
Css:
.search-overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
background:rgba(255,255,255,0.9);
z-index: -1;
transition: all 250ms ease-in-out;
}
.body-wrapper{
transition: all 1200ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
width:100%;
height:100%;
}
.search-open .search-overlay{
opacity:1;
z-index: 5;
}
.search-open .body-wrapper{
position:fixed;
top:0;
left:0;
opacity:0.5;
transform: scale3d(0.85, 0.85, 1);
}
Html:
<div class="search-overlay">
Search Content...
</div>
<div class="body-wrapper">
Body Content...
</div>
Then jquery to toggle the class use a button or something in the body content and the overlay to close it:
$('.search-button, .search-close').on("click", function(){
$('body').toggleClass("search-open");
});
1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});
All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>
HTML:
<div class="container">
<article class="caption">
<svg class="grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle class="myPoint" cx="50" cy="50" r="5" fill="#80E1EE" />
</svg>
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
text
</p>
</div>
</article>
</div>
CSS:
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
/* This works with css when i am hovering on caption class.
.caption:hover::before {
background-color: rgba(0, 0, 0, .5);
}
*/
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.grid-point {
position: absolute;
z-index: 99999;
}
jQuery:
$(document).ready(function() {
$(".myPoint").hover(function() {
// I am trying here to do the same but with jQuery and when the circle is hovered and not the caption class
$('.caption:hover::before').css("background-color": "rgba(0, 0, 0, .5)");
});
});
Below is my css code, i have commented a few css lines that are working when the article caption class is hovered, the article caption class gets an overlay. I want now with jQuery make the same thing but now the article must get the overlay if the svg circle is hovered and not the article caption class, but my css function doesn't work. What should i do to archieve the result?
Demo: http://jsfiddle.net/mek71rry/
why you don't try using jQuery add class like this
$(".myPoint").addClass('caption');
and this CSS code
.caption:hover::before{ background-color: rgba(0,0,0,.5);}
Try to append it to head.
Using Jquery
$('head').append('<style>.caption:hover::before{background-color: "rgba(0, 0, 0, .5)"; }</style>');
using Css
.caption:hover::before { background-color: rgba(0, 0, 0, .5); }
I'm not sure but try the following jquery solution, replacing :
$('.caption:hover::before').css("background-color": "rgba(0, 0, 0, .5)");
By :
$('.caption').hover(function(){
$(this).prev().css("background-color": "rgba(0, 0, 0, .5)");
});
Hope this helps.
I'm hoping someone can help me with an issue I'm running into. I'm trying to set up a series of photos. That have this CSS/HTML property:
http://jsfiddle.net/i_like_robots/7GvV2/embedded/result%2chtml%2ccss/
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
I actually got the code from this site.
But there will be upwards of 30 photos, so I was hoping to put them inside a scrolling box/area about 400h x 700w px. When I add the scrolling box, either by HTML, or CSS the results are the same. There is a box, with no scrolling. And all photo's have been shrunken down to fit inside of the box.
Can anyone PLEASE help me with this?
Thanks.
What I've done is removed the CSS for the .container element, in case you want to keep that for a different purpose, and added a .scroller element as a wrapper around the images (within the .container). If you don't have another use for the .container, you can replace .scroller in the CSS with .container, and remove the .container I added to the HTML. A little wordy, so if you need an easier explanation let me know.
So the HTML changes in that there's a new <div> with class scroller surrounding the <article> elements.
The CSS adds the .scroller class, and another rule just to space the images apart a little bit:
.scroller{
margin:0px auto;
height:400px;
max-height:400px;
width:700px;
max-width:700px;
padding:10px 20px;
border:1px solid #aaa;
overflow-y:scroll;
}
.scroller article:not(:last-child){
margin-bottom:10px;
}
Fiddle: http://jsfiddle.net/435rx66s/
What is this scroll box / area?
You've given us this code that you referenced in your implementation, but where is your implementation for us to reference?
The given code works well if you are creating more articles within that container. Give the container a fixed height and set overflow to auto and there should be no problem with getting this content to sit within a scrolling box.
https://jsfiddle.net/i_like_robots/7GvV2/
.container {
height:200px;
overflow:auto;
position:relative;
margin: 0 auto;
max-width: 480px;
}
if you're open to a bit of jquery, there's quite a simple solution.
a short jquery function
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
will show your articles in turn.
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
#container {
margin:0 auto;
max-width: 480px;
max-height:240px;
overflow:hidden;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
article{max-width:480px; max-height:240px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
</p>
</div>
</article>
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Michigan</h1>
<p class="caption__overlay__content">
Some dummy text for testing
</p>
</div>
</article>
</div>
</div>