I want to make responsive image gallery. That will display extended image on thumbnail hover. Gallery can't use any JS this is requirement.
But there is 1 little problem. Gallery needs to be responsive.
That means expanded image have to be the same size as the default image that is responsive and resize on smaller devices.
Here is my html code
<div class="container"></div>
<div class="container">
<div id="gallery-photo-container">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/60BBDre.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/60BBDre.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/C7SFJxy.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
<div class="gallery-main-image">
<img src="http://i.imgur.com/aa5kiAi.jpg">
</div>
</div>
<div class="gallery-thumbnail-image">
<img src="http://imgur.com/TWLJOVv.jpg">
<div class="gallery-main-image">
<img src="http://imgur.com/TWLJOVv.jpg">
</div>
</div>
</div>
</div>
Absolute approach
I have almost done it, using absolute position and positioning with top attribute. But on resize expanded image is the size of left container beginning to the right end of the page.
Here is my DEMO1 and CSS.
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
max-width: 100%;
}
.gallery-main-image {
position: absolute;
visibility: hidden;
top: 18px;
left: 18px;
margin-right: 8px;
}
.container {
width: 50%;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
}
Relative approach
I think it can be done it too, by using relative position and positioning with bottom attribute. But here the problem is that thumbnail image container is resizing to the expanded image size on hover. And the bottom attribute value is screen size dependent.
In this DEMO2 you have to click on a thumbnail because they are jumping. And here is CSS for relative approach.
.gallery-thumbnail-image:hover > .gallery-main-image {
display: block;
opacity: 1;
}
.gallery-thumbnail-image {
display: inline-block;
}
#gallery-photo-container .gallery-thumbnail-image > img {
width: 79px;
}
#gallery-photo-container img {
width: 100%;
}
.gallery-main-image {
position: relative;
display: none;
bottom: 373px;
}
So, could it be done responsive way with one of these two approaches? Or maybe you have another idea. I'm looking forward for your help.
See this update of your plunk.
https://plnkr.co/edit/6EOKiKEQcxDiuIXApPLo?p=preview
the main changes are here:
.gallery-main-image {
position: absolute;
display: none;
top: 10px;
left: 10px;
right: 10px;
}
#gallery-photo-container {
border: 1px solid black;
padding: 10px;
position: relative;
}
Use of an absolute element positioned within relatively positioned element.
You need a margin-right: 8px;, because of the top: 8px; left: 8px; Plunkr:
.gallery-thumbnail-image:hover > .gallery-main-image {
visibility: visible;
opacity: 1;
margin-right: 8px;
}
Slightly off-topic, but... just in case you're interested in simulating an onclick event with CSS, see this SO answer.
Related
I'd like to be able to circle elements on a web page using only CSS. I have some code that is almost working - it produces a circle around the element but
the width does not match the width of the content (it is always too big), and
I cant seem to get it to center on the child
The following code is what I currently have
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>MWE</title>
</head>
<body>
<style>
div.ccc {
display: run-in;
position: relative;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
</style>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" width="10%">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</body>
which produces the following. Note that the circles are not centered on the images and the width's are off.
Is it possible to fix that using CSS only?
Set the div to display:inline-block and it will work.
Divs are block-level elements by default, which mean they'll take 100% the width.
edit: problem is that you're using % to size the image, which depends on the parent width... and we are trying to get the parent sized accordingly to the child... So that won't work.
Closest you can get, as far as I can tell, is avoid sizing your image on %, and display the div as inline-block
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.small{
width:200px;
}
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" class="small">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
if you really need to size it as %, you'll need to add another container and size that one instead
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.img-container{
display:inline-block;
}
.img-container img{width:100%}
.small{
width:200px;
}
<div class="ccc">
<div class="img-container small">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>
<div class="ccc">
<div class="img-container">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>
The width of a div is 100% by default, that's the reason all your circles are massive and not centred on the child.
Why not just put the red circle border on the img tag instead of the div? I.e., put the circle on the child element in the first place.
Another option would be to get the div to match size of the content by setting display: inline-block on the .ccc class.
If neither of those is an option, I'm pretty sure there is no pure CSS way of doing it.
I currently have a couple of slideshows going that require me to have the container to be position: relative; and its child elements (img's) must be
position: absolute;
Like So:
HTML
<div class="frontimg">
<div><img src="img/jackson.jpg"></div>
<div><img src="img/custom.jpg"></div>
</div>
CSS
.frontimg {
width: 100%;
text-align: center;
position: relative;
}
.frontimg img {
position: absolute;
width: 50%;
}
And then a small js script to make them fade in and out.
I am having trouble positioning another div below it. The div below it just seems to be hidden under it.
That's because the children of ".frontimg" are not the images, but the div's that surround them.
try this:
.frontimg div {
position: absolute;
width: 50%;
}
If the images have a common height, you can simply give the .frontimg div either a set height, or bottom padding etc. to push the following elements down past the images. E.g.
.frontimg {
width: 100%;
text-align: center;
position: relative;
padding-bottom: 110px;
}
.frontimg img {
position: absolute;
width: 50%;
}
.next {border: 5px solid #30353b; background: #e7e7e7; min-height: 100px;}
<div class="frontimg">
<div><img src="https://unsplash.it/800/100"></div>
<div><img src="https://source.unsplash.com/random/800x100"></div>
</div>
<div class="next">
<p>The following div</p>
</div>
That div you want to stack under the slideshow is a static element, whilst the other elements are not (display:relative,absolute, fixed are out of the normal flow of static elements. Therefore you must assign that div a position of absolute, fixed, or relative so that it can interact with the other elements properly.
I added a demo that shows a div in two positions:
click the div to toggle it's position from static to absolute.
SNIPPET
var div = document.querySelector('.div');
div.addEventListener('click', function(e) {
if (div.classList.contains('static')) {
div.classList.remove('static');
div.classList.add('absolute');
} else {
div.classList.add('static');
div.classList.remove('absolute');
}
}, false);
.frontimg {
width: 100%;
text-align: center;
position: relative;
}
.frontimg img {
position: absolute;
width: 50%;
}
.div {
border: 1px solid grey;
height: 50px;
width: 50%;
pointer-events:auto;
cursor: pointer;
}
.static {
position: static;
}
.absolute {
position: absolute;
bottom: 0;
right: 0;
}
<div class="frontimg">
<div>
<img src="http://placehold.it/350x150/000/fff?text=1">
</div>
<div>
<img src="http://placehold.it/350x150/00f/fc0?text=2">
</div>
</div>
<div class="div static">DIV</div>
Based in this answer, you need javascript (Jquery in this case) for achieve this effect.
Add this Jquery code in your js file.
var biggestHeight = "0";
$(".frontimg *").each(function(){
if ($(this).height() > biggestHeight ) {
biggestHeight = $(this).height()
}
});
$(".frontimg").height(biggestHeight);
Add another div -
<div class = "someClass"> Some text </div>
Use position:absolute and assign a top property to define the position -
.someClass {
position: abolsute;
top : 40% //or whatever you like
}
You can also add a line break - <br>
I am trying to build an overlay (mouseover) on a image with dynamic height:
<div id="one-third">
<div class="over_menu">Text</div>
<div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>
CSS
.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }
Unfortunately the height of "over_menu" is too large, it shows until the whole rest of the page. How else can I fix this?
Give position: relative; to the parent, so that its boundaries are within it:
.one-third { width: 33.3333%; position: relative; }
You should move the over_menu to inside menu_bg
<div id="one-third">
<div class="menu_bg">
<div class="over_menu">Text</div>
<img src="one.jpg" class="resp-img">
</div>
</div>
Of course you should change your :hover condition as well. It would be helpful if you could add a JSFiddle to your question.
I have the following markup (Fiddle Example Here: http://jsfiddle.net/9gvj11o5/8/)
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt=""/>
</div>
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
<div class="content">content</div>
And the following CSS:
.header {
position: relative;
}
.image {
position: absolute;
}
img {
width: 100%;
height: auto;
outline: 0;
}
I need the image to be responsive and have 100% width aligned to top.
But I also need the menu and tools to be over the image and having their normal flow.
Content should be after the image, so after the header.
The image would be the "background" of the header div. (I cannot use background-image)
I am using position but the menu and tools disappear the moment I use it.
What am I missing? Do I need another wrapper div somewhere?
I would wrap the 2 divs .menu & .tools so you need only to apply z-index to the wrapper div instead of each child. which make .menu & .tools (wrapped) in front of the .image.
then change position:absolute to position:relative to .image in order to have .content below header.
Below you can see the snippet, very lightweight.
.header {
position: relative;
}
.image {
position: relative;
z-index:1
}
#menu-all {
position:absolute;
top:0;
z-index:2
}
img {
width: 100%;
height: auto;
outline: 0;
}
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt="" />
</div>
<div id="menu-all">
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
</div>
<div class="content">content</div>
You can use z-index to define the layer order of your elements. The smaller the number, the closer to the "bottom" of the stack. So we give the img a very small number, and menu and tools a very large one.
.header {
position: relative;
}
.image {
position: absolute;
z-index: 1; /* here you can use -1 as Paulie_D points out in the comments */
}
img {
width: 100%;
height: auto;
outline: 0;
z-index: 2; /* here you can use -1 as Paulie_D points out in the comments */
}
.menu {
position: absolute;
top: 0;
left: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}
.tools {
position: absolute;
top: 0;
right: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}
I'm creating a hover effect so that when someone mouse-over's on an image scan lines appear, but can't get the damn overlay image to be the same size as the image.
Take a look at this fiddle: http://jsfiddle.net/number8pie/wwmPL/
Here's the HTML:
<div class="container">
<a href="#">
<div class="overlay"></div>
<img src="http://www.mainlymunros.co.uk/images/green%20square.bmp" repeat>
</a>
</div>
Here's the CSS:
.container {
position: relative;
max-width: 200px;
}
img {
width: 100%;
position: relative;
z-index: 1;
padding: 7px;
border: 1px solid #333;
}
.overlay {
display: none;
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
margin: 8px;
background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}
a:hover .overlay {
display: block;
}
If you hover over the green block you can see the scan lines overlap at the bottom, I want to remove this overlap.
The image is dynamic and changes size depending on the size of the browser size.
Anyone got any suggestions?
The problem is that you're giving it 100% height and 100% width but then you're giving it margin. You're telling it to be the exact size of it's containing a element, but then pushing it down a bit.
You need to add an extra container, remove the image's padding and border and assign that to the new container.
<a href="#">
<div class="image">
<div class="overlay"></div>
<img src="http://www.mainlymunros.co.uk/images/green%20square.bmp"/>
</div>
</a>
.container a {
display:block;
padding:7px;
border: 1px solid #333;
}
.image {
position:relative;
width:100%;
height:100%;
display:block;
}
img {
width: 100%;
position: relative;
z-index: 1;
}
.overlay {
display: none;
position:absolute;
z-index: 5;
width: 100%;
height: 100%;
background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}
Example: JSFiddle.
Your problem now is that your img isn't square. Being a rectangular image with greater width than height means it will fill 100% width but cut off part of the height. Make your image a square or give your overlay the same aspect ratio and this will work perfectly.
its padding property which creates overflow. so change the height of both image and .overlay
that will do.
fiddle :http://jsfiddle.net/wwmPL/2/
i hope this that solves your problem :)