I have searched other questions but none are giving the result I am looking for.
I am trying to :hover in order to show another div and also hide another div at the same time. I can't wrap all divs in one parent div, because then the div I want to hide being :hover over will trigger the show/hide... and in addition do it with a nice transition.
Only when hovering over the 'hover me' text should the show/hide trigger.
The .remove_me class and text 'make me disappear' isn't disappearing on :hover. That is what I am unable to achieve.
Fiddle
CSS
.hover_me {
cursor:pointer;
-webkit-transition: .4s;
transition: .4s;
display:block;
height:30px;
background:#ccc;
width:70px;
line-height:30px;
text-align:center;
}
.show_me {
display:none;
}
.hover_me:hover + .remove_me {
display:none;
}
.hover_me:hover + .show_me {
display:block;
}
.remove_me {
display:block;
HTML
<div class="hover_me">hover me</div>
<div class="show_me">show me</div>
<div class="remove_me">make me disappear</div>
This for example is not what I want to happen: http://jsfiddle.net/MBLZx/ the show/hide should only be triggered by the 'hover me' text
It should work as you want it to if you do it like this:
I changed your CSS code
.hover_me:hover + .remove_me {
display:none;
}
To:
//Note the tilde
.hover_me:hover ~ .remove_me {
display:none;
}
Explanation on the tilde
Hope this helps
I have changed your selector, and changed the display (that can not be animated) to opacity (that can)
.hover_me {
cursor:pointer;
-webkit-transition: .4s;
transition: .4s;
display:block;
height:30px;
background:red;
width:70px;
line-height:30px;
text-align:center;
}
.show_me {
opacity: 0;
}
.hover_me:hover ~ .remove_me {
opacity: 0;
}
.hover_me:hover + .show_me {
opacity: 1;
}
.remove_me {
margin-top: -1em;
opacity: 1;
}
div {
transition: opacity 1s;
}
<div class="hover_me">hover me</div>
<div class="show_me">show me</div>
<div class="remove_me">make me disappear</div>
Actually to select the remove_me you have to apply the one more + as show_me lies in between. + select the next tag class. so we have to put the + .show_me on between
.hover_me:hover + .show_me + .remove_me {
display:none;
}
check the fiddle http://jsfiddle.net/stdeepak22/enmxx59b/
You need to ...
use the general adjacent selector ~ and not the direct adjacent selector + to make .remove_me "disappear"
use opacity or any other property that you can use with transition (not display) to create a show/hide effect
Change your CSS as follows:
.hover_me:hover ~ .remove_me{
display:none;
}
Demo fiddle here
.hover_me {
cursor:pointer;
-webkit-transition: .4s;
transition: .4s;
display:block;
height:30px;
background:red;
width:70px;
line-height:30px;
text-align:center;
}
.show_me {
opacity: 0;
}
.hover_me:hover ~ .remove_me {
opacity: 0;
}
.hover_me:hover ~ .show_me {
opacity: 1;
}
.remove_me {
opacity: 1;
}
.toggled{
position: absolute;
transition: opacity 300ms;
}
<div class="hover_me">hover me</div>
<div class="toggled show_me">show me</div>
<div class="toggled remove_me">make me disappear</div>
Related
I'm trying to increase the duration of CSS :active and found this thread How to increase the duration of :active in css? I tried this but it didn't work on my code.
here my code:
li {
transition:0s 1s;
}
li:active:before {
content:"hello !";
z-index:99999999;
position:fixed;
bottom:0px;
width:100%;
background:black;
text-align:center;
color:white;
padding:10px 0;
transition:0s;
}
<li>Style This</li>
the :active rule will stop matching as soon as the mouse button is released. thus the :before will be removed.
You could render the block, and not display it until the :active starts matching.
caveat: If the :before block is clicked, its parent will also become active.
In the end, I would opt for a JavaScript solution.
li {
transition:0s 1s;
}
li:before{
content:"hello !";
z-index:99999999;
position:fixed;
bottom:0px;
width:100%;
background:black;
text-align:center;
color:white;
padding:10px 0;
transition:1s;
opacity:0;
}
li:active:before {
display:block;
opacity:1;
transition:0s;
}
<li>Style This</li>
The trick won't work as you expect simply because there is no transition applied to the li element.
You need first to understand how it works. Here is a simple example:
.box {
background:red;
height:200px;
transition:0s 1s;
}
.box:active {
background:green;
transition:0s;
]
<div class="box"></div>
When you click, the active state is considered; thus the transition is set to 0s and the background become immediately green. When you release the mouse, the active state is no more considered and we have the new transition with a dely so the the background go back to red after this delay.
So in order to have such think, you may consider doing the same but with the pseudo element:
li:before {
content: "hello !";
z-index: 99999999;
position: fixed;
bottom: 0px;
width: 100%;
background: black;
text-align: center;
color: white;
padding: 10px 0;
opacity:0;
transition: 0s 4s;
}
li:active::before{
opacity:1;
transition: 0s;
}
<li>Style This</li>
I considred opacity but it can work with any animatable property.
I have a input type="text" field. By intially the field should contain field name. When user clicks on that input field the field name should move up and leave space to enter the value.
I searched in google but I couldn't found any solution related to my need.
It will be great if anyone could help me.
Initally form looks like
After clicking on field
The thing you want can be achieved by implementing material design. Use this: https://codepen.io/sevilayha/pen/IdGKH
* { box-sizing:border-box; }
/* basic stylings ------------------------------------------ */
body { background:url(http://scotch.io/wp-content/uploads/2014/07/61.jpg); }
.container {
font-family:'Roboto';
width:600px;
margin:30px auto 0;
display:block;
background:#FFF;
padding:10px 50px 50px;
}
h2 {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer { text-align:center; }
.footer a { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#5264AE;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
#-webkit-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
#-moz-keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
#keyframes inputHighlighter {
from { background:#5264AE; }
to { width:0; background:transparent; }
}
<div class="container">
<h2>Google Material Design in CSS3<small>Inputs</small></h2>
<form>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email</label>
</div>
</form>
<p class="footer">
a tutorial by scotch.io
</p>
</div>
Use material design and you can use md-input-container
<md-input-container class="md-block">
<label>Username</label>
<input type="text">
</md-input-container>
Material design input
I have this little carousel that moves on mousehover
http://jsfiddle.net/dpn3t9p6/1/
HTML
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>
CSS
#container {
width:600px;
overflow:hidden;
}
#parent {
width:6000px;
}
.contentBlock {
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height:600px;
width:auto;
}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
JS
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
I want a text caption over the image. I can't figure it out, in my tests (https://jsfiddle.net/g5vakqw5/2/) caption will always follow the movement of carousel and won't stay adherent to the image.
Thank you for your time and help
You just need to make the position of the contentBlock relative. See here your jsfiddle
.contentBlock {
position: relative; // <---- here is the change
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
(function () {
var scrollHandle = 0,
scrollStep = 5,
parent = $("#container");
//Start the scrolling process
$(".panner").on("mouseenter", function () {
var data = $(this).data('scrollModifier'),
direction = parseInt(data, 10);
$(this).addClass('active');
startScrolling(direction, scrollStep);
});
//Kill the scrolling
$(".panner").on("mouseleave", function () {
stopScrolling();
$(this).removeClass('active');
});
//Actual handling of the scrolling
function startScrolling(modifier, step) {
if (scrollHandle === 0) {
scrollHandle = setInterval(function () {
var newOffset = parent.scrollLeft() + (scrollStep * modifier);
parent.scrollLeft(newOffset);
}, 10);
}
}
function stopScrolling() {
clearInterval(scrollHandle);
scrollHandle = 0;
}
}());
#container {
width:1980px;
overflow:hidden;
}
#parent {
width:2532px;
}
.contentBlock {
position: relative;
font-size:10em;
text-align:center;
line-height:400px;
height:auto;
width:auto;
margin:2px;
float:left;
}
.contentBlock img {
height: 850px;
width:auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.contentBlock:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);}
.panner {
border:1px solid black;
display:block;
position:fixed;
width:50px;
height:50px;
top:45%;
}
.active {
color:red;
}
#panLeft {
left:0px;
}
#panRight {
right:0px;
}
.bsubtitle11 {
font-weight:300;
font-size:35px;
text-align:center;
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 45%;
width: auto;
opacity: 1;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
.contentBlock:hover .bsubtitle11 {
opacity: 1;
}
.bsubtitle11 span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="container">
<div id="parent">
<div class="contentBlock">
<img alt="Les Bourdelles Des Garcons" src="http://www.deblasiis.com/wp-content/uploads/2016/10/MG_4194-copia-3.png">
<p class="bsubtitle11"><span>Les Bourdelles des Garcons</span></p>
</div>
<div class="contentBlock"><img alt="Religio Universalis" src="http://www.deblasiis.com/wp-content/uploads/2016/11/MG_7877-dOUBLE.jpg"></div>
<div class="contentBlock"><img alt="Isal Bed Ollen" src="http://www.deblasiis.com/wp-content/uploads/2016/11/01-N-1.jpg"></div>
</div>
</div>
<span id="panLeft" class="panner" data-scroll-modifier='-1'><</span>
<span id="panRight" class="panner" data-scroll-modifier='1'>></span>
If you want The text to be fixed and not me with image carousel, Then create one seprate tag add your text and make it position: absolute.
Use top and left values to place it properly over the image:
CSS:
#container {
width:600px;
overflow:hidden;
position: relative:
}
#container p {
position: absolute;
top: 50px;
left: 50px;
font-size: 24px;
font-weight: bold;
}
JS FIDDLE LINK
I am making a little photo gallery and I want there to be an effect on the image when you hover either the image or the text link. You can see an example here:
http://codepen.io/anon/pen/qarvc
Right now, if you hover over any of the entire parent div it triggers the hover effect I want for the image and image span. The problem though, is that if you hover over the empty space to the right of the h4 a, it still triggers the hover but the user can't actually click a link.
Now in the actual work, I have another element floated to the right of the h4 a, so it is not a solution to just make the h4 a a block.
How can I use css to target .gallery-image when h4 a is hovered?
html
<div class="galleries">
<div class="gallery">
<div class="gallery-image">
<span class=""></span>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTEH-vPVcz7F8Yb18iLtDEjnZsbWfYG4lCFdyhKMRYax1krBnRD" alt="" />
</div>
<h4>gallery name</h4>
</div><!-- end div.gallery -->
css
#content-full {
width:960px;
padding:30px 0 0;
}
.clearboth {
clear:both;
height:0;
}
.gallery {
position:relative;
float:left;
width:300px;
margin:0 10px 35px;
}
.gallery-image span {
background:url("http://inventionhome.com/wp-content/uploads/2014/07/zoom.png") no-repeat center center;
width:90px;
height:90px;
display:none;
z-index:999;
margin:auto;
position:absolute;
top:-50px; left:0; bottom:0; right:0;
}
.gallery-image {
background-color:#4576a4;
}
.gallery-image:hover span, .gallery:hover .gallery-image span {
display:block;
}
.gallery-image img {
display:block;
width:100%;
height:230px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.gallery-image:hover img, .gallery:hover .gallery-image img {
opacity:0.2;
}
.galleries h4 {
margin-top:5px;
line-height:27px;
}
.galleries h4 a {
color:#142533;
}
.galleries h4 a:hover {
text-decoration:none;
}
The issue you are running into with using only CSS is that there doesn't exist a CSS selector to select the previous or parent element. You can work around this stipulation if your images are going to be consistent sizes (height), you could put the <h4> ahead of the <div class="gallery-image"> and position it below the image with position: absolute; -- allowing your to use the CSS ~ selector to have hover events affect the image because it is after the element in the DOM. Also, I alleviated your white space selector issue with display: inline-block;:
<div class="gallery">
<h4>...</h4>
<div class="gallery-image">...</div>
</div>
.gallery {
position:relative;
}
.gallery-image:hover span {
display:block;
}
.gallery-image:hover img {
opacity:0.2;
}
.galleries h4 {
margin-top:5px;
line-height:27px;
display: inline-block;
position: absolute;
top: 230px;
}
.galleries h4:hover~.gallery-image img {
opacity:0.2;
}
.galleries h4:hover~.gallery-image span {
display: block;
}
-- I only included edited CSS above
JSFIDDLE
I'm bringing another answer, the symbol "+" also works when it comes to apply a style to an element of the same level in markup hierarchy :
The CSS modified :
.galleries h4:hover + .gallery-image img {
opacity:0.2;
}
.galleries h4:hover + .gallery-image span {
display: block;
}
It works only if the element we are targeting is immediatly positionned after the initial. In our case it works, just after h4:hover, we find .gallery-image.
I have this code
http://jsfiddle.net/F6Jqm/1/
I want when user clicks the png the hover <span> to stay. And when he clicks it again to return to the original form.
You could do this by adding a "stay" class on click
like in this fiddle: http://jsfiddle.net/F6Jqm/3/
The difference is in css:
#navigationMenu a:hover span, #navigationMenu a.stay span{
width:auto; padding:0 20px;overflow:visible;
}
And Added some jquery:
$(document).ready(function(){
$("a").click(function(){
$(this).toggleClass("stay");
});
});
I've update the fiddle
Try this:
var count = 0;
document.getElementsByClassName('home')[0].onclick = function() {
count = 1 - count;
if (count) {
document.getElementById('navigationMenu').className = 'stayHover';
}
else {
document.getElementById('navigationMenu').className = 'menuHover';
}
}
You could use toggleClass instead if you don't mind importing jQuery for this.
Here's a solution with only CSS (no Javascript). I only tested on firefox and chrome, but it should go on all recent browsers.
http://jsfiddle.net/F6Jqm/6/
The idea is to use the pseudoselector :checked of an input type checked and the relative label and setting it on the icon with opacity: 0.
CSS:
#navigationMenu li{
list-style:none;
height:20px;
width:20px;
}
#navigationMenu input[type=checkbox] {
position:absolute;
z-index: 1;
opacity:0;
}
#navigationMenu span{
width:0;
left:22px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:20px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu label {
background:url('http://www.tigercamera.com/front/img/home.png') transparent no-repeat;
padding:0px;
height:20px;
width:20px;
display:block;
position:relative;
border: 0px;
}
/* General hover styles */
#navigationMenu input:hover + label span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu input:checked + label span{ width:auto; padding:0 20px;overflow:visible; }
/* Green Button */
#navigationMenu .home { background-position:0 0;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
HTML:
<div id="main">
<ol id="navigationMenu">
<li>
<input name="check" type="checkbox"/>
<label for="check" class="home">
<span>Home</span>
</label>
</li>
</ol>
</div>
There you go(with pure js): http://jsfiddle.net/F6Jqm/7/
var nav = document.getElementById('navigationMenu'),
items = nav.getElementsByTagName('a'),
i;
for( i=0; i<items.length; i++){
items[i].onclick = function(){
if( this.classList.contains('active') ){ this.classList.remove('active') }else{
this.className = this.className + ' active';
}
};
}