i have following code
<div>
<img src="http://placehold.it/350x150"/>
<div class="link-cont">click here to see more info</div>
</div>
div {
width: 350px;
font-size:12px;
position: relative;
}
div img{
padding:0 10px;
}
.link-cont {
background: red;
position: absolute;
bottom: 0;
width: 370px;
height: 210px;
opacity: 0;
transition: all 0.4s;
z-index: -1
}
div:hover .link-cont {
opacity: 1;
bottom:-40px;
}
.link-cont a{
opacity: 0;
}
div:hover .link-cont a{
position: relative;
opacity: 1;
bottom:-175px;
left:10px;
background:#fff;
color:red;
text-decoration:none;
padding:0 10px;
}
A link is wrapped inside a div which appears on hover. how do i make this touch device friendly.
jsfidd--> http://jsfiddle.net/yeyene/Nnd7w/17/
Several solutions:
skip hover effects in touch device stylesheets
use JavaScript to turn hover into click interactions
use JavaScript to simulate hover interactions on the touch device (see this Question on StackOverflow
Try this:
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
Related
I been trying all day to find a nice simple short pure-css/html code only to make a div disappear when a button is clicked. I would prefer CSS but if not possible will take a JS solution instead.
Lot of solutions on overflow but most use js. please take a look at my code below and add a example or suggestion below. Thanks for any help, Stewy
body {
background-color: #6B6B6B;
font-family: Arial;
color: grey;
font-size: 12px;
margin: 0px;
}
/*............... bgcover ...............*/
.bgcover {
position: fixed;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .4);
}
.call {
position: fixed;
top: 100px;
left: 100px;
}
/*........ crossfade on buttons ........*/
.hover,.nohover{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;
}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
<div class="bgcover" align="center">
<p>Button turns off this bg cover div.</p>
</div>
<div class="call">
<a href="bgcoveroff.htm">
<img src="http://wizzfree.com/pix/call2.png" width="100" class="nohover">
<img src="http://wizzfree.com/pix/call.png" width="100" class="hover"></a>
</div>
Define your interactive node and your target node.
Create event listener to handle click event.
create a function which would hide your second element
const button = document.getElementById('button'); // or classname, whatever. it is your link or any node element instead of it.
const div = document.getElementById('targetDiv');
function toggleDiv(e) {
// e - event object - {button}.
e.preventDefault(); // only if you use <a> as node.
div.classList.add("my-classname-to-hide-div");
}
button.addEventListener('click', toggleDiv, false);
css
.my-classname-to-hide-div {
display: none;
// or
opacity: 0;
visibility: hidden;
transition: all 0.2s all;
}
ps. if you use JQuery the code could be much simpler and you can use built-in transition effects.
You have to pass the the inline JS in tag. than only possible to hide the element. onclick attribute should need to trigger.
Like this Click
Hi Stewy please check this code. It is example of the inline js.
body {
background-color: #6B6B6B;
font-family: Arial;
color: grey;
font-size: 12px;
margin: 0px;
}
/*............... bgcover ...............*/
.bgcover {
position: fixed;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .4);
}
.call {
position: fixed;
top: 100px;
left: 100px;
}
/*........ crossfade on buttons ........*/
.hover,.nohover{
transition:.3s;
position:absolute;
}
.nohover{
opacity:0;
}
a:hover .hover{
opacity:0;
}
a:hover .nohover{
opacity:1;
}
.hidden{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bgcover" id=box align="center">
<p>Button turns off this bg cover div.</p>
</div>
<div class="call">
<a id="btn" onclick="document.getElementById('box').classList.toggle('hidden');" >
<img src="http://wizzfree.com/pix/call2.png" width="100" class="nohover">
<img src="http://wizzfree.com/pix/call.png" width="100" class="hover"></a>
</div>
Right now I have an image that has another image absolutely positioned on top of the first one. Both images are inside an a tag.
I am trying to get it so that when I hover on any part of the first image, both the first image goes from .5 opacity to full, and the 2nd image goes from 0 opacity to full.
I've been able to make the hover work for the image but the 2nd image only activates it's opacity when I hover directly on it, rather than highlighting both when I'm on either of them.
<div class="of-volume image-column">
<a href="http://www.greatlengthshair.co.uk/hair-extensions/">
<img src="img/artistry-1-bg.jpg" alt="artisans of volume link" class="image-link">
<img src="img/artistry-1-icon.png" alt="" class="artisan-icon">
</a>
</div>
/*//////////////////////////////////////
IMAGE NAV
//////////////////////////////////////*/
.image-column {
background-color: black;
float: left;
width: 33.3333%;
position: relative;
margin-bottom: -3px;
}
.image-column a {
opacity: .5;
}
.image-column a:hover {
opacity: 1;
}
.artisan-icon {
position: absolute;
margin-right: auto;
margin-left: auto;
right: 0;
left: 0;
bottom: 25px;
}
You have mixed up most of your CSS rules. Just attach the desired effects to the correct hover state:
.image-link { opacity: 0.5; }
.artisan-icon { opacity: 0; }
a:hover .image-link { opacity: 1; }
a:hover .artistan-icon { opacity: 1; }
I put both absolute images inside a relative div, then did set the :hover selector on this container.
body {
width: 100%;
height: 100%;
margin: 0px;
}
#container {
position:relative;
width:100%;
height:200px;
}
img {
position:absolute;
top: 0px;
left:0px;
width:100%;
height:200px;
-webkit-transition: opacity 1s; /* Safari */
transition: opacity 1s;
}
#pic1 {
opacity:0.0;
}
#pic2 {
opacity:0.5;
}
#container:hover #pic1, #container:hover #pic2 {
opacity: 1;
}
<div id=container>
<img id=pic1 class=picture src="http://i.imgur.com/tMVGqP6.jpg" alt=img>
<img id=pic2 class=picture src="http://i.imgur.com/Goy7oBy.gif" alt=img>
</div>
I was doing previous and next experiments like facebook, as we do a hover on image it will show previous and next icons. I modified the icons a little bit using simple CSS. but only thing i am missing here is the correct position of the navigation div's.
I want them in the middle of image no matter if the image is 600*600 or 1024*800.
i tried these, but didnt make any progress -
var maskHeight = ($('mainOne').height() - 50);
$('#hoverP').css({top:maskHeight}).show();
$('#hoverN').css({top:maskHeight}).show();
here is sample test case, which includes everything related to problem, Please Help.-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="./jQuery.min.js"></script>
<style>
.imgHover {
display: inline;
position: relative;
}
.imgHover .hoverP {
display: none;
position: absolute;
left: 3px;
top:-200px;
z-index: 2;
}
.imgHover .hoverN {
display: none;
position: absolute;
right: 0px;
top:-200px;
z-index: 2;
}
.prev_big,.next_big {
background-color:rgba(66,28,82,0.4);;
border:2px solid rgba(255,255,255,0.7);
color:#FFF;
font-size:78px;
font-weight:700;
width:30px;
height:200px;
line-height:200px;
-webkit-transition:.4s all;
-moz-transition:.4s all;
-o-transition:.4s all;
transition:.4s all;
text-shadow:0 1px 0 #FFF;
z-index:3;
text-decoration:none;
-moz-transition-duration:.4s;
-webkit-transition-duration:.4s;
-o-transition-duration:.4s;
transition-duration:.4s;
}
.prev_big {
border-bottom-right-radius:15px;
border-top-right-radius:15px;
margin-left:-3px;
padding:0 20px 0 0;
}
.next_big {
border-bottom-left-radius:15px;
border-top-left-radius:15px;
right:0;
padding:0 5px 0 15px;
}
.prev_big:hover,.next_big:hover {
color:#FFF;
background:#732C7B;
padding-top:140px;
padding-bottom:140px;
}
</style>
</head>
<script>
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.95).end().children(".hoverP").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hoverP").hide();
}
);
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.95).end().children(".hoverN").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hoverN").hide();
}
);
});
</script>
<body>
<div class="imgHover">
<div class="hoverP"><a class="prev_big" href="page1.html" title="View Previous Page"><</a></div>
<img id="mainOne" src="./oneB.jpg" alt="">
<div class="hoverN"><a class="next_big" href="page3.html" title="View --Next-- Page">></a></div>
</div>
</body>
</html>
Why you need jQuery, bunch of styles with filled markup? I've made this from complete scratch and you see if it's useful
Demo
On the other hand you can use transitions for smoothness - Demo
<div class="wrapper">
<img src="http://www.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="bar">PreviousNext</div>
</div>
CSS
div.wrapper {
position: relative;
display: inline-block;
}
.bar {
opacity: 0;
background: rgba(25,25,25,.5);
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
}
div:hover .bar {
opacity: 1;
}
.wrapper a {
position: absolute;
}
.wrapper a:nth-of-type(1) {
left: 0;
}
.wrapper a:nth-of-type(2) {
right: 0;
}
I'm using the following CSS code to do a rollover effect with text:
.thumb {
position:relative;
}
.thumb img:hover {
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.thumb:hover {
background:#f00;
}
.thumb span {
z-index:-10;
position:absolute;
top:10px;
left:10px;
}
.thumb:hover span {
z-index:10;
color:#fff;
}
HTML code:
<div class="thumb">
<img src="thumbnail.jpg" />
<span>Text</span>
</div>
Everything is working well except when I hover over the text: the rollover effect disappears and I can see the image again.
Any ideas?
Thanks in advance
I guess that is too much of styles for simple overlay effect, if you are interested to see a demo I've made from scratch than here you go
Demo
HTML
<div class="wrap">
<img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay">Hello This Is So Simple</div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
opacity: 0;
background: rgba(0,0,0,.8);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition: opacity 1s;
color: #fff;
text-align: center;
}
.wrap:hover .overlay {
opacity: 1;
}
When you click on image in facebook , a box pos-up but the rest entire background gets covered by blackish transparent layer. what effect is that ? can it be applied using css ?
you can use this plugin:
//www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
yes. That effect can be done using only css.
If you have any id or class applied to that element. Then do this -
#transparentLayer {
opacity:0.5; //for non-IE
color:#000;
filter: alpha(opacity=50); // for IE
}
Open FancyBox
<div class="fancybox">
<div class="content">
<div class="close">x</div>
</div>
</div>
and jQuery:
$(".fancybox").hide();
$("a").click( function() {
$(".fancybox").show();
});
$(".close").click( function() {
$(".fancybox").hide();
});
CSS:
.fancybox {
background-color:rgb(0,0,0);
background-color:rgba(0,0,0, 0.7);
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.content {
width:600px;
background:#fff;
margin:0 auto;
height:100%;
position:relative;
}
.close {
position:absolute;
font-size:22px;
top:2px;
right:15px;
font-family:Arial;
}
.close:hover {
cursor:pointer;
}
http://jsfiddle.net/YnQbY/1/
It certainly can be applied using css:
here is the css for a black overlay:
.overlay{
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
the z-index indicates that the overlay is positioned above all other elements, the element (the image frame on Facebook) that should be on top of the overlay must have a z-index with value 1002 or more.
the -moz-opacity is the opacity for the overlay with firefox, the opacity for the overlay with chrome, safari,... and the filter is for an overlay with IE.
I have created a project with a similar issue, I created a div with class overlay that was initially hidden, and when clicked on a button the visibility was set to visible. The I've put an iFrame on top of the div overlay (with z-index 1002).
this was the css for my overlay:
.black_overlay{
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
padding: 0px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 6px solid #E1143C;
background-color: rgba(228,208,150,1);
z-index:1002;
overflow: auto;
}
and following jQuery:
function showForm() {
$(".black_overlay").show(200);
$(".white_content").show(500);
}