EDITED:
1) desktop size: hover overlay works, a click on img leads to the website.
2) mobile size: hover doesn't work, a click on img does both overlay and goes straight to the website (I don't want that).
3) I want mobile size to behave ALMOST same as desktop size, overlay then a second click to lead to the website.
Tried: Added second ahref "Click to enter" inside IMAGE while having first ahref with "#/" for overlay purpose, doesn't work. Any better solution?
https://jsfiddle.net/6ro92ao9/
HTML
<div class="gallery">
<a href="http://codepen.io/ngarciaiii/full/Vjwjbp/">
<img src="http://i.imgur.com/0IGbqui.jpg" alt = "Web Ex1" class="image">
<div class="overlay">
<h2 class="text">HTML5 CSS3</h2>
</div>
</a>
</div>
CSS
.gallery {
position: relative;
width: 320px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
}
.image {
display: block;
width: 320px;
height: 200px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: auto;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: black;
}
.gallery:hover .overlay {
opacity: .8;
}
Related
I have a Lity anchor link that should pop up a modal containing a Youtube video. The odd thing is that this works completely fine on Chrome desktop, but on Safari and Chrome mobile the link is not clickable minus a small area. I've tried various z-indexing, various pointer-events, and tried removing the absolute positioning altogether yet it's still not clickable on mobile.
I've added borders to show where the clickable area vs not clickable area is. The blue outside the red/green borders allows the modal to pop out. Inside the red/green it is not clickable.
Again this is only on Safari and Chrome mobile browser, everything is fine on desktop.
Here's the HTML structure
<div class="featured-video">
<a href="https://www.youtube.com/embed/_XXXXXX" data-lity="" class="videoLink">
<img data-src="https://i3.ytimg.com/vi/XXXXXX/hqdefault.jpg" alt="product video" class="videoImage lazyloaded" src="https://i3.ytimg.com/vi/_R1CnAi4PKM/hqdefault.jpg">
<span class="yt-thumb-button">.</span>
</a>
</div>
Here's my CSS/SCSS
.featured-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
z-index: 100;
pointer-events: none;
border: 1px solid blue;
.videoLink {
position: absolute;
top: 0;
left: 50%;
width: 90%;
height: 90%;
transform: translateX(-50%);
z-index: 101;
display: block;
border: 1px solid limegreen;
pointer-events: auto;
}
}
.yt-thumb-button {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
// z-index: 1;
background: url(https://cdn11.bigcommerce.com/s-za3wv/product_images/uploaded_images/youtube-grey-play.png) no-repeat center center;
background-size: 20%;
color: transparent !important;
pointer-events: none;
border: 1px solid red;
&:hover {
opacity: .4;
transition: opacity .2s ease-out;
}
}
Clickable Area Image
The z-index in the featured-video is greater than your button class. Set the z-index value of the button to 999.
Ive got a product page with a smaller image of the product.
Now I want to show a bigger version of this image with a colored background covering the whole page, while I hover the smaller image.
The problem is, that the bigger image flickers while I move the mouse around.
My CSS:
#zoomed-product-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(162, 130, 192, 0.8);
z-index: 0;
visibility: hidden;
}
#zoomed-product-img img {
display: block;
margin: auto auto;
}
.productsdetail-image:hover~#zoomed-product-img {
visibility: visible;
}
My HTML:
<div class="productdetails">
<div class="productsdetail-image">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
<div id="zoomed-product-img">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
Can you help me? Maybe my way of thinking is wrong.
I think it flickers because when I show the bigger image, it is above (z index) the small one and I am not hovering the image anymore so it disappears.
I would also love to solve this with javascript, if you can give me any advice.
You need to specify dimensions for the container of the image. This is why it is flickering. I also used display: none; and display:block to hide and show the images.
.productdetails {
position: relative;
}
#zoomed-product-img {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* This is the product detail image styles */
.productsdetail-image {
display: block;
height: 200px;
width: 200px;
}
.productsdetail-image:hover img {
display: none;
}
.productsdetail-image:hover + #zoomed-product-img {
display: block;
}
HTML
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/200/200/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Demo:
http://jsfiddle.net/n07bt46y/
Please check this in full page
$(document).ready(function(){
$('.productsdetail-image img').hover(function() {
$(this).hide();
$('#zoomed-product-img ').show(500);
});
$('#zoomed-product-img .close').click(function(){
$(this).parent().hide();
$('.productsdetail-image img ').show();
});
});
.productsdetail-image img {
width: 150px;
height: auto;
transition: all 0.5s ease;
}
#zoomed-product-img {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#zoomed-product-img span.close {
position: absolute;
color: #fff;
cursor: pointer;
top: 20px;
right: 20px;
}
#zoomed-product-img img {
position: absolute;
width: 300px;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: aUto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<span class="close">close</span>
<img class="zoom-img" src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Are you wanna build something like that? Hoppefully that fiddle can help you
Today I was trying to make a full HTML/CSS slider, the only problem I have right now is when I try to click the next/previous button my page is scrolling to the top of the page and I just don't know why.
Most of the solutions on internet are using javascript or jquery but I am not able to use any kind of javascript.
I hope anyone can help me! When you click the next/previous button you will notice the problem! I have made an example on jsfiddle as you can see below:
https://jsfiddle.net/17cojwtv/
PS: i know that the images are not working!
All my items work like this:
<div class="slider">
<ul>
<li class="slide" id="no-js-slider-2">
<img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
prev
next
</li>
</ul>
</div>
Currently i only use this CSS:
ul li {
list-style-type: none !important;
margin: 0!important;
}
a.prev,
a.next {
height: 100px;
width: 43px;
opacity: 0.7;
text-indent: -99999px;
cursor: pointer;
-webkit-transition: opacity 200ms ease-out;
}
a.prev:hover,
a.next:hover {
opacity: 1;
}
.prev {
left: 0;
/* margin-top: 212px;*/
position: absolute;
background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px;
}
.next {
/*margin-top: 212px;*/
left: 669px;
position: absolute;
background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px;
}
.slider {
margin: 0 !important;
/*position: relative;*/
height: 474px;
}
.slide {
position: absolute;
height: 100%;
width: 100%;
}
.slider .slide:target {
z-index: 100;
}
.slider img {
margin: 0 !important;
}
I think there are some similar questions like this already in the site. anyhow here you go use onclick="return false;
<li class="slide" id="no-js-slider-2">
<img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
<a onclick="return false; href="#no-js-slider-1" class="prev">prev</a>
<a onclick="return false; href="#no-js-slider-3" class="next">next</a>
</li>
I am trying to achieve two hover effects on an image.
First, when the user hovers over an image a plus icon on the top right corner of the image appears.
Second, when the user hovers over the plus the icon changes to: “Add to collection”.
All these events need to be smooth transitions.
My first problem is I can't get any smooth transitions going for the first hover.
My second problem is I have no idea how to achieve the second hover - I've done a lot of Google searches but this doesn't seem to be a common effect.
Here is the code I have tried so far (with fill murray placeholder image):
HTML:
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
</a>
</div>
CSS:
.item-link:hover:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 10px;
right: 10px;
}
And here is the js fiddle
Here is the screenshots for what I want to achieve with the second hover:
Just did a little bit changes in your mark up and and find a solution for your issue. Yes, It's not possible to :hover a pseudo-element. Added a new div btn-plus and a span text for convenience. This is done using pure css. Hope this helps :)
.btn-plus:before {
content: '';
display: block;
position: absolute;
width: 58px;
height: 58px;
background-image: url('http://i.imgur.com/bWcylV3.png');
border-radius: 50%;
top: 0px;
right: 30px;
z-index: 1;
}
.btn-plus{
position: absolute;
display: block;
width: 200px;
height: 58px;
top: 30px;
right: 0;
opacity : 0;
transition: all ease .5s;
}
.item-link{
width: 100%;
height: 100%;
display: block;
}
.item-link img{
width: 100%;
}
span.text{
position : absolute;
top: 0px;
right: 0px;
color: #fff;
padding: 15px;
width: 150px;
height: 30px;
border-radius: 30px;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
transition: all ease .5s;
opacity : 0;
}
.item-link:hover .btn-plus{
opacity : 1;
}
.btn-plus:hover span{
opacity : 1;
right: 30px
}
<div class="item">
<a href="#" class="item-link">
<img src="https://www.fillmurray.com/g/582/580" alt="dimsum">
<div class="btn-plus">
<span class="text">Add to list</span>
</div>
</a>
</div>
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 7 years ago.
A CSS animation is continuously playing behind an image. When the image is not loaded it will display, but when loaded the image will overlap the animation. I'm using z-index to achieve this, but it's not working.
The image should hide loading animation with the z-index property.
Note: I can't use any javascript solution to hide the loading animation and show it after image load.
CSS / HTML / Demo
.leftprev {
overflow:auto;
position:absolute;
height:99%;
width:85%;
}
.loadingslide {
z-index: 50; /* Loading div's z-index */
}
.spinner.big {
display: block;
height: 40px;
}
.spinner {
bottom: 0;
display: none;
font-size: 10px;
height: 30px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 60px;
}
.spinner.big > div {
width: 6px;
}
.spinner > div {
animation: 1.2s ease-in-out 0s normal none infinite stretchdelay;
background-color: #333;
display: inline-block;
height: 100%;
width: 6px;
}
a {
color: #470a09;
text-decoration: none;
}
.slideshow .slidebro .leftprev #slideshowpic {
display: block;
margin: 0 auto;
width: auto;
z-index: 100; /* image's z-index */
}
<div class="leftprev">
<div class="loadingslide"> <!-- Loading Animation div (should be running in background of the image) -->
<div id="tracking" class="spinner big">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<a id="targetslide" target="_blank" title="Click to view fit to screen" href="">
<img src="http://www.placehold.it/500" alt="" id="slideshowpic" /> <!-- The image (should mask the loading animation div) -->
</a>
</div>
You have to add position to the element that you want to apply z-index.
From CSS-tricks:
The z-index property in CSS controls the vertical stacking order of
elements that overlap. As in, which one appears as if it is physically
closer to you. z-index only effects elements that have a position
value other than static (the default).
http://css-tricks.com/almanac/properties/z/z-index/
To position the loading animation correctly:
Place the loading div inside the container
Set the container as position: relative so that the loading div is positioned in relation to it
To hide the loading animation when the image is loaded:
The loading div is given z-index: 1
The image is given position: relative so that it can have a z-index property
The image is given z-index: 2 and will overlap
In this example the image is half the width of the container and you can see how it overlaps the loading div.
CSS / HTML / Demo
html, body {
height: 100%;
margin: 0;
}
.content {
height: 500px;
width: 500px;
background: #e91e63;
margin: 0 auto;
position: relative;
}
.content img {
z-index: 2;
position: relative;
width: 250px;
height: 500px;
}
.loading {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 1em;
padding: 20px;
background: #FF0;
text-align: center;
font-weight: bold;
z-index: 1;
}
<div class="content">
<div class="loading">I am loading</div>
<img src="http://www.placehold.it/250X500" />
</div>