CODEWITHSUNDEEP
htmlcss
SpaceIsCoolMan
SpaceIsCoolMan

Reputation: 29

get div above picture to have same height as it

This might be two questions in one, I'll strat with the actual one. I want to build a website that is simple and that is mostly out off pictures. Those pictures are set so resize automaticly between 1280px and 640px - that works fine. BUT now I want to have a div that slides in above each picture once you hover above it. The sliding in can be archived with css or java that I know, the problem is that the div with the text does not resize as the picture does. In other words putting it to 100% height and 100% width doesn't fix it to the picture size. Is there a way to have it always the same size as the picture below it?!

Right now the height is set to 360px because thats how I left it but here is the link to my testpage so you can take a look at what I mean.

www.panorama-publishing.de/theme-dev

thank you in advance! let me know if you need more detail.

Upvotes: 0

Views: 91

Answers (2)

Boyan Hristov
Boyan Hristov

Reputation: 1102

Why don't you resize the div containing the picture and not the other div (call it overlay, if you will). Then you can set the picture to be 100% of the parent div and the overlay can slide from top to bottom and be as big as the entire screen, if you are lazy. As long as you set oveflow: hidden; to the parent element, everything will be just great. This is what I mean:

JSFIDDLE

Upvotes: 1

Eiiki
Eiiki

Reputation: 320

I've came across this problem when struggling with bigg css libraries and elements that are sometimes hard to style around. This jQuery solution have helped me where I basicly make the width of an element follow an width of a target element width.

function resize_follower() {
    $(".follower").width($(".some-size").width());
}

$(window).resize(function () {
    resize_follower();
});

$(document).ready(function () {
    resize_follower();
});

Example fiddle here

Upvotes: 0

Related Questions