In my php page dynamically visualize the thumbnails. To make sure that these are all of the same size I do in this way
<a class="zoom" href="...">
<img src="thumb/default.png" width="130" style="background-image:url(thumb/<?php echo $images_jpg;?>);" class="centered" />
</a>
CSS
img.centered {
background-repeat: no-repeat;
background-position: center center;
}
/* 1 attempt */
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
/* 2 attempt */
a.zoom img:hover {
background-image: url(thumb/zoom.jpg);
}
I would like to display a different image on event: hover, but this does not work. How could I do that? thanks
You could always do it like this.
HTML:
<div class="image" style="background-image:url(http://www.randomwebsite.com/images/head.jpg);">
<div class="overlay"></div>
</div>
CSS:
.image {
width: 200px;
height: 200px;
border: 1px solid;
}
.overlay {
width: 100%;
height: 100%;
}
.overlay:hover {
background: url(http://1.bp.blogspot.com/-lJWLTzn8Zgw/T_D4aeKvD9I/AAAAAAAACnM/SnupcVnAsNk/s1600/Random-wallpapers-random-5549791-1280-800.jpg);
}
So here we have the image you are getting via PHP on top as a div. And inside we have the overlay, the image you want when a user is hovering. So we set that to 100% width and height so it takes up all of the parent div and set the hover.
DEMO HERE
In your example the <img> always lays over the <a> background-image.
To avoid that, you could hide the image on hover. But that is kinda ugly ;)
a.zoom:hover {
background-image: url(thumb/zoom.jpg);
}
a.zoom:hover img
{
opacitiy: 0;
}
try this
<img class="centered" src="thumb/default.png"/>
and jquery
$(".centered").attr("src","second.jpg");
Related
I'm trying to do image "carousel" with horizontal scroll. Pure HTML + CSS without JS.
This is my HTML:
<div class="slideshow">
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
<figure class="slideshow__fig">
<img src="img/hilti-png.png" alt="p" class="slideshow__fig-img">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</div>
This is my css:
.slideshow {
display: flex;
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: scroll;
//width: 80vw;
//margin: auto;
&::-webkit-scrollbar {
width: 350px;
height: 10px;
}
/* Track */
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 500px;
}
/* Handle on hover */
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
&__fig {
flex: 0 0 auto;
height: 900px;
&-img{
height: 100%;
//width: 100%;
display: block;
}
}
}
1 - The problem is when I set the width of the .slideshow to 80vw, then naturally the scrollbar is shorter, but my images are cropped and not going full display width. When I try to adjust the width of the scrollbar with ::-webkit-scrollbar {width: 350px or 50vw or ...} exactly nothing happens.
I would like to have a scrollbar which is not full width of the div which I'm scrolling, but somehow can't figure it out.
2 - The other problem is I would like to have a figcaption at the bottom left side of the image. But somehow it doesn't show when the horizontal scroll is there. Any suggestions?
Here is the example how I would like to have it:
example image
edit: Now I finally managed to do it by adding:
&::-webkit-scrollbar-button:end:increment {
width: 50%;
display: block;
background: transparent;
}
But now the problem is that the scrollbar is not in middle, but on the left side. Margin:auto doesn't help. No idea how else to do it.
Also making img size 90% revealed the caption which is not that bad solution.
Now the only question is how to put the scroll bar in the centre.
Here is something close to the image you provided as an example. Sorry, but I really don't know how this can be achieved respecting the Pure HTML + CSS without JS criteria. I think it isn't possible at all.
So here, it uses jQuery and jQuery-ui draggable.
It uses a draggable div contained within its parent. Ondrag, it calculates the "scrolled" percentage to apply it to the scrollable width of the image slider.
For mobiles... I added the "touch punch" patch for jQuery-ui. More details about it here. I also placed the "initialisation code" in a function, so it can run on load AND on resize.
$(document).ready(function(){
function initDisplay(){
let slide_scrollWidth = $("#slide")[0].scrollWidth;
let customScrollbar_width = $("#sliderScroll_outer")[0].scrollWidth;
let percent = slide_scrollWidth/customScrollbar_width
$("#sliderScroll").css({"width":percent+"%", "left":0})
$("#slide")[0].scrollTo(0,0)
}
// On page load
initDisplay()
// Useful for mobile orientation change
window.onresize = initDisplay
$("#sliderScroll").draggable({
containment: "#sliderScroll_outer",
scroll: false,
drag: function(e){
let parentOffset = $(e.target).parent().offset().left
let offset = $(e.target).offset().left
let scrollableWidth = $(e.target).parent().width() - $(e.target).width()
let sliderPercent = (offset-parentOffset)/scrollableWidth
//console.log(sliderPercent)
let imageSliderWidth = $("#slide")[0].scrollWidth - $("#slide").width()
//console.log(imageSliderWidth)
$("#slide")[0].scrollTo(sliderPercent*imageSliderWidth,0)
}
});
});
#container{
margin: 1em;
}
#slide{
display: flex;
overflow: hidden;
}
#slide img{
margin: 0 0.5em;
}
#sliderScroll_outer{
width: 40vw;
background: lightgrey;
margin: 1em;
}
#sliderScroll{
width: 0vw;
height: 10px;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<div id="container">
<div id="slide">
<img src="https://via.placeholder.com/800x600.png">
<img src="https://via.placeholder.com/400x600.png">
<img src="https://via.placeholder.com/1000x600.png">
</div>
<div id="sliderScroll_outer">
<div id="sliderScroll"></div>
</div>
</div>
Run in full page mode or CodePen
I am trying to align these four separate spliced images from an original image. I am doing this because each portion of the image has a separate link.
I have the images align. Now all I want to do is shrink the size of the images via width: #%;
For some reason this just isn't seeming to work.
Any help would be appreciated.
Here is a link to the CodePen: http://codepen.io/anon/pen/pvGgdp
.split,
.split2,
.split3,
.split4 {
display: inline-block;
margin: -2px;
}
.spliter {
margin-top: -3px;
}
<div class="splitWrapper">
<div class="split">
<a href="#">
<img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
</a>
</div>
<div class="split2">
<a href="#">
<img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
</a>
</div>
<div class="spliter"></div>
<div class="split3">
<a href="#">
<img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
</a>
</div>
<div class="split4">
<a href="#">
<img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
</a>
</div>
</div>
You could use background images and assign them to the a tags. I have amended your codePen here > http://codepen.io/anon/pen/YPBwJX
However, it may be better to just use one image, and overlay transparent a-tags, set them to display block and then you don't have to worry about the image lining up! Anyways, please see the code below for the question asked =)
.splitWrapper {
width: 850px;
margin: auto;
}
a.split1 {
background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
background: url('http://i.imgur.com/sMsHX14.png');
}
a.split{
width: 417px;
height: 300px;
float: left;
margin: 0;
padding: 0;
display: block;
background-size: 417px 300px;
}
.clear { clear: both; }
<div class="splitWrapper">
<div class="clear"></div>
</div>
I don't think you quite understand how % works in CSS. % means that percentage of the parent element. Also, for it to work, the parent element has to have a defined width. Here's the CSS changes you need:
.splitWrapper {
width: 100%;
}
.split, .split2, .split3, .split4 {
display: inline-block;
margin: -2px;
width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
max-width: 100%;
}
.spliter {
margin-top: -3px;
}
http://codepen.io/anon/pen/KwJVGQ
You'll need to adjust your margins accordingly. You should use percentage margins since you're working with percents. Just divide the width of the margin by the width of the element and multiply it by 100 to get your margin percentage.
So what I'm trying to do is have an SVG overlay on an image on hover. Eventually I will animate it, but for now I'm just trying to get the overlay working. This is what I tried:
<div class="centering margin-on-top">
<img id="img1" src="media/circle-1.jpg" />
<img id="img2" src="media/circle-2.jpg" />
<img id="img3" src="media/circle-3.jpg" />
</div>
CSS:
#img1:hover {
background: url("../svg/stroke-ears.svg") no-repeat;
}
At first I thought it wasn't working at all. But then when I put the hover on the containing div instead and deleted the picture inside the "inspect element" window, the svg was there but hidden underneath the image.
Is there a way for me to maybe set a z-index on the image or the background?
Thanks in advance.
Change your CSS to this:
#img1 {
position: relative;
}
#img1:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("../svg/stroke-ears.svg") no-repeat;
}
What you're doing is creating a pseudo-element to overlay on top of the img. Your original img had the background applied to the background of the img as opposed to overlaying it.
This new solution creates an element outside the normal DOM that will treat your img as a container and cover the entirety of its dimensions with an element that has the original background you wanted applied.
Update
JSFiddle example
So, silly me, trying to treat imgs as containing elements. Here's the fix.
HTML
<div class="inline-container centering margin-on-top">
<div class='img-holder'>
<img id="img1" src="http://placehold.it/200x200" />
</div>
<div class='img-holder'>
<img id="img2" src="http://placehold.it/200x200/FBC93D" />
</div>
<div class='img-holder'>
<img id="img3" src="http://placehold.it/200x200/075883" />
</div>
</div>
CSS
.inline-container {
font-size: 0;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder:hover:after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
background: url("http://placeskull.com/200/200") no-repeat;
}
You could easily swap the images to be background images on the new div, too, if you wanted to shorten up your HTML.
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
Basically I'm making a navigation bar and due to Jquery doing a lot of resizing to make a website look 'pretty' I don't want to use a horizontal list and so each button is created like so:
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
(yes they're all image buttons for good reason)
but the only problem is they're fixed and set to "top 0" at the top of the page and as a result cannot sit next to each other but rather overlap, any idea on how I can I still keep the position to fixed and they top to 0 yet keep them next to each other?
HTML
<div id="top">
<img src="homeicon.png"><span id="homex"><br /><img src="home.png" /></span>
</div>
CSS
#top a.button { position: fixed; top: 0; padding: 12px; background: url('glacial_ice.jpg'); text-decoration: none; color: black; border-radius: 0px 0px 25px 25px; }
#top { position: relative; top:0; padding-left: 25px; }
Init function (runs on $(document).ready())
$('a.button').animate({
height: '+=5px',
}, 20, function() {
$('a.button').animate({
opacity: 0.6,
height: '-=5px',
}, 20);
});
Thanks
Put them all in a container, i.e. id="header", give the header position:fixed;top:0;etc...
Then, for each of the link/buttons give them:
position:relative;display:inline-block;float:left;
if you want them centered, then in the #header use text-align:center; and remove float:left from the links
So the container will be fixed, but the buttons inside will be relative and not overlap.
hope this helps!
very crude example
http://jsfiddle.net/6SCTZ/
<div id="header">
<div class="button">button1</div>
<div class="button">button2</div>
<div class="button">button3</div>
</div>
CSS:
#header { position:fixed;top:0;width:100%;height:30px;background:black; text-align:center }
.button {position:relative;display:inline-block;color:white;margin:0 5px 0 5px;}
Just put whatever elements need to be fixed within a container element (in this case, I'll use a div with an ID of "top_fixed").
Consider the following html:
<div id='top_fixed'>
<a href='http://google.com'>Google</a>
<a href='http://yahoo.com'>Yahoo</a>
</div>
<div id='tall'></div>
Now, the following CSS:
a { display: inline; }
#top_fixed { position: fixed; top: 0; left: 0; width: auto; }
#tall {height: 2000px; background: #000;}
DEMO: http://jsfiddle.net/mHKNc/1/