i am attempting to display images when the corresponding thumbnail is hover over using only css and am having trouble with the logic and don't know if it is even possible. i can do it in javascript if absolutely necessary.
Here is my latest attempt.
<div id='img-container' class='grd12'>
<img id='img1' class='slide-images' src='images/10086115704_15ab56a165_o.jpg' alt='1'>
<img id='img2' class='slide-images' src='images/9917938624_0a8778f8b1_o.jpg' alt='2'>
<img id='img3' class='slide-images' src='images/PIA18847.jpg' alt='3'>
<img id='img4' class='slide-images' src='images/sun-large.jpg' alt='4'>
</div>
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb1' class='grd3 thumbnail' src='images/10086115704_e36e457d2b_q.jpg' alt='##'>
<!-- </div>-->
<!-- <div class='grd3 thumbnail'>-->
<img id='thumb2' class='grd3 thumbnail' src='images/9917938624_1ed12deaa2_q.jpg' alt='##'>
<!-- </div>
<div class='grd3 thumbnail'>-->
<img id='thumb3' class='grd3 thumbnail' src='images/PIA18847.jpg' alt='##'>
<!--</div>
<div class='grd3 thumbnail'>-->
<img id='thumb4' class='grd3 thumbnail' src='images/sun-large.jpg' alt='##'>
<!--</div>-->
And the CSS
#img-container{
position:relative;
top:0px;
left:0px;
height:950px;
}
.slide-images{
position:absolute;
top:0px;
left:0px;
}
.thumbnail > img{
margin-left:auto;
margin-right:auto;
display: inherit;
}
img#thumb4:hover ~ #img4>#image4{
display:none;
}
I believe this is possible using CSS alone, however it is not very scaleable and it might end up being easier and more appropriate to use Javascript for this. For example:
img#thumb1:hover ~ #img4>#image4{
display:none;
}
Your selector here is incorrect. The general sibling selector selects only elements after the first match. In this case, your image thumb is after your image, but this selector is looking for an image after an image thumb. This is the opposite of what you have. There is no 'sibling before' selector in CSS.
An easier solution, rather than fiddling around with CSS selectors, would just be to bind each thumbnail to a click event that changes the source of a single image tag each time (or alternatively, scrolls across/fades, whatever animation you're looking for). This way, you save on markup, don't need to worry about positioning as much, and can dynamically generate the image display.
For example, to get the ID of an image, you could bind a click event to each thumbnail and then grab the ID of the image which could stored in a data attribute:
$('.thumbnail').on('hover', function() {
var activeImg = $(this).data('imgid');
// From here, set the main image to have the associated image source
}
This is very possible to achieve with just CSS. The layout of your HTML is what needs to change. In this example:
Each thumbnail and full-size image is placed inside a div container
The full-size image is hidden with opacity: 0;
When the div container is hovered, the full-size image is given opacity: 1 and will fade-in thanks to the transition
z-index: 1 keeps the full-size images above the thumbnails
Full Example
.item {
float: left;
position: relative;
}
img {
display: block;
cursor: pointer;
margin: 5px;
}
.fullsize {
position: absolute;
opacity: 0;
transition: opacity 0.6s;
z-index: 1;
top: 0;
left: 0;
pointer-events: none;
}
.item:hover .fullsize {
opacity: 1;
}
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
<div class="item">
<img class="fullsize" src="http://lorempixel.com/output/people-q-c-600-600-9.jpg" />
<img class="thumb" src="http://lorempixel.com/output/people-q-c-200-200-9.jpg" />
</div>
Related
In Blogger paragraphs aren't wrapped in <p></p> tags and they are displayed as plain text with line breaks (<br/>). I want to hide the first image that appears before any text and not the first image if there is any text before it.
For example:
This is some text (image AFTER text should be visible):
<img src="image.png"/>
Hide image in this example:
<img src="image.png"/>
This is some text (image BEFORE text should be hidden)
since there is no way to manipulate text nodes in CSS, here is a clean way to fix your issue:
with absolute positioning the image to make it appear before text with adding padding the the parent post div
.post {
padding-top: 150px;
position: relative;
}
.post img {
display: none;
}
.post img:first-of-type {
display: block;
position: absolute;
top: 0;
left: 0;
height: 150px;
}
<div class="post">
Hello there is a hidden image below Hello there is a hidden image below
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
</div>
<div class="post">
<img src="https://via.placeholder.com/350x150" /> Hello there is a hidden image below Hello there is a hidden image below
<img src="https://via.placeholder.com/350x150" />
<img src="https://via.placeholder.com/350x150" />
</div>
So I have a bunch of elements like:
<div class="hover-icon one">
<img class="original" src="sswe-images/Circle_Customer Notifications.png"/>
<img class="hovered one" src="sswe-images/Customer-Notifications.gif" />
</div>
<div class="hover-icon two">
<img class="original" src="sswe-images/Circle_Field Service Tools.png" />
<img class="hovered" src="sswe-images/Field-Service-Tools.gif" />
</div>
<div class="hover-icon three">
<img class="original" src="sswe-images/Circle_Remote Connectivity.png" />
<img class="hovered" src="sswe-images/Remote-Connectivity.gif" />
</div>
where the .original are placeholders and the .hovered are gifs that I want to animate on hover, then go back to their normal state after the mouse leaves. My attempt is:
$('div.hover-icon').hover(function(){
var orig = $(this).find('.original');
orig.hide();
var hov = $(this).find('.hovered');
hov.attr('src', hov.attr('src') + "?x=" + Math.random());
setTimeout(function(){ hov.show(); }, 100);
/* $(this).mouseleave(function(){
hov.hide();
orig.show();
});*/
});
but the reason for the commented out section is because it's not working. It's causing all kinds of craziness. What is the proper pattern I should be using here?
The basic HTML structure is correct. Use CSS only though , like this codepen http://codepen.io/ryanpcmcquen/pen/gGqdI does
.hover-icon {
position: relative;
margin: 0 auto;
}
.hover-icon img {
position: absolute;
}
.hover-icon img.original:hover {
opacity: 0;
}
I made some code where the user can upload some images from a zip. On the next page I need to show all the images seperatly in a 85*85 px frame.
The problem is that it may take some time for all the images to load. So I want to show a loading gif while the user waits for the image to load.
I've set the src of the images to be the loading gifs, while I created some checkboxes with the real source as id
echo "<td><img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\">";
echo "<input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /></td>";
<input type="hidden" name="aantal" id="aantal" value="<?=$image?>" >
Then I created some javascript to check if the image is loaded, and when it is, it is supposed to replace the source of the image.
<script>
var aantal = document.getElementById("aantal").value;
for(var i = 0; i < aantal; i++){
var source = document.getElementById("img["+i+"]").value;
var img = new Image();
img.onload = function(){
$("#img"+i).attr('src', source);
}();
img.src = source;
}
</script>
But this does not work the way I expected, I think it fires for all of the images as soon as the first one is loaded. Any ideas what I am doing wrong or how to fix this?
You can set the background of an image to the loading gif. It is a simple css trick. You wouldn't need then to make a js script.
.loading {
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />
Update :
In case you have transparent images then the story becames a bit more complicated but, still can be done with css and some div elements.
.image-wrapper {
overflow: hidden;
width: 106px;
height: 106px;
display: inline-block;
}
.image-wrapper img {
float: left;
display: block;
opacity: 0.2; /* simulating a semitransparent image */
}
.image-wrapper:after, .loading {
content: ' ';
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat ;
background-size : auto 100%;
width: 106px;
height: 106px;
float: left;
display: block;
}
<div class="image-wrapper">
<!-- simulates a hard loading image -->
<img src="http://placehold.it/not-existing" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=2" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=3" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=4" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=5" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=6" alt="" />
</div>
<div class="image-wrapper">
<img src="http://placehold.it/106x106&text=7" alt="" />
</div>
Unfortunately the browser adds a broken icon or a ? while loading, this is why the image contains an empty alt;
Update 2 :
The second variant relies very much on the image size, if you have difrent sizes than the loading gif won't be pushed away properly, as an alternative would be to use the first variant and a little js script that will remove the background as soon as the image is loaded:
$('img').load(function(){
$(this).css('background','none');
});
.loading {
background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="loading" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />
Angular 8 Solution with Hostlistener and Hostbinding.
1. Create a simple attribute directive
import { Directive, HostListener, Input, HostBinding } from '#angular/core';
#Directive({selector: '[imageLoader]'})
export class ImageLoaderDirective
{
#Input('src') imageSrc;
#HostListener('load')
loadImage()
{
this.srcAttr=this.imageSrc;
}
#HostBinding('attr.src') srcAttr="../../assets/pics/Loader.svg"
constructor() { }
}
Basically we set the initial image source to the loader image. Once the image loads(load event triggered), we listen to it and set the image source to the actual image.
2. Now use the just need to use the created attributes on your images.
<img imageLoader src='image.jpg'>
Using svg requires no styling changes, gif may require css changes.
You can visit the website for working implementation.
Here is a div, containing images, with max-height: 300px. Whenever a scrollbar is needed (this is the case here), I want to add a second div (the gray one) next to the first. I use scrollHeight to test the presence of a scrollbar.
<div class="container">
<div class="pictures">
<img src="test1.jpg" /> <img src="test2.jpg" /> <img src="test3.jpg" /> <img src="test4.jpg" />
<img src="test5.jpg" /> <img src="test6.jpg" /> <img src="test7.jpg" /> <img src="test8.jpg" />
<img src="test9.jpg" /> <img src="test10.jpg" /> <img src="test11.jpg" /> <img src="test12.jpg" />
<img src="test13.jpg" /> <img src="test14.jpg" /> <img src="test15.jpg" /> <img src="test16.jpg" />
<img src="test17.jpg" /> <img src="test18.jpg" /> <img src="test19.jpg" /> <img src="test20.jpg" />
<img src="test21.jpg" /> <img src="test22.jpg" />
</div>
<div class="scroll"></div>
</div>
Some CSS:
div.container {
width: 410px;
max-height: 300px;
overflow: auto;
}
div.container div.pictures {
float: left;
width: 390px;
}
div.container div.scroll {
display: none;
float: left;
width: 30px;
background-color: #eee;
}
And the JS:
$(function() {
$(".scroll").each(function() {
var iParentHeight = $(this).parent()[0].scrollHeight;
if (iParentHeight > $(this).parent().css("max-height").replace(/[^-\d\.]/g, '')) {
var iWidth = $(this).parent().width()+$(this).width();
$(this).parent().css("width", iWidth);
$(this).show();
$(this).height(iParentHeight);
}
});
});
On Firefox it's working. On Chrome and Safari though, there is some issue: sometimes (actually, most of the time for Safari) the gray dive does not appear when it should.
I made some tests: without images, with X time the same image and with X different images. The issue is only appearing when there is X different images (maybe some loading time problem?).
In fact, the output of scrollHeight is not always the same on Chrome and Safari. For FF, I always get the same result.
Any idea would be appreciated!
Edit: forgot the link with an example: http://toolboxebz.free.fr/test_scroll/test.html
I think that you should wrap your js function in a document.ready or utilize something like imageloaded, as you said the behaviour is not deterministic, that's due to the fact that when your function runs, images could be not already fully loaded in the browser.
A div in which I would be sliding in images , I want the images to appear in only a certain area of the div, say a triangle shaped area. The rest of the div should just show whatever is underneath the div.
CSS:
#overlay {
width: 700px ;
height: 300px ;
position: absolute;
top: 50px;
left: 50px;
z-index: 100;
background: url("img/overlay.png");
background-repeat: no-repeat;
}
HTML:
<div class="boxcat" id="websitesbox">
<div id="overlay"></div>
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
Here I would be sliding in the images into overlay, BUT I don't want the images to show up completely , instead just a part of the overlay div should be covered in the image.
Not sure If I am making any sense. If I am is this possible ?
Thanks
You want to use mask-image however it isn't widely supported by the browsers.
Here you can read about the spec: http://www.w3.org/TR/css-masking/
And here you can see the support: http://caniuse.com/#search=mask
you can next websitesSlider into overlay:
<div class="boxcat" id="websitesbox">
<div id="overlay">
<div id="websitesSlider">
<img src="img/seanswers.PNG" alt="Seanswers screenshot">
<img src="img/stories.png" alt="Seanswers screenshot">
<img src="img/PerfectUpload_1.png" alt="Seanswers screenshot">
</div>
</div>
</div>