I would like to have a double hover effect but I do not get it.
I would like to avoid the transition by leaving the appeared icon.
Maybe I get some help here. Any suggestion is welcome.
Here is my HTML:
http://jsfiddle.net/CB5Lr/
<div class="block image addMore" style="position: absolute; top: 100px; left: 50px; height: 350px;width:200px;background-color:red;">
<span data-action="fullView" class="shopIcons full_screen_icon"></span>
<figure class="with-hidden-caption">
please hover here. after a second a icon will apear in the right corner.
<br><br>
If you hover the icon it will change. Until here everything is OK.<br><br>
But, if you leave the icon, it shout show the old one without the rolling effekt.
</figure>
</div>
and the css:
.shopIcons {
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 0 transparent;
}
span.full_screen_icon {
background-position: 0px 0px;
cursor: pointer;
opacity: 0;
height: 45px;
position: absolute;
right: -45px;
top: -45px;
width: 45px;
z-index: 10;
transition-duration: .6s;
transition-delay: 1s;
/* transition: all; */
}
span.full_screen_icon:hover {
background-position: 0px -50px;
transition-delay: 0s;
transition-duration: 0s;
}
div.addMore:hover span.full_screen_icon {
opacity: 1;
right: 0;
top: 0;
}
http://jsfiddle.net/CB5Lr/
Well, my first idea, use :after (or another element inside the span) because somehow you need to add another element to play with the hover > hover:
http://jsfiddle.net/CB5Lr/7/
.shopIcons {
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 0 transparent;
}
span.full_screen_icon {
background-position: 0px 0px;
cursor: pointer;
opacity: 0;
height: 45px;
position: absolute;
right: -45px;
top: -45px;
width: 45px;
z-index: 10;
transition-duration: .6s;
transition-delay: 1s;
}
span.full_screen_icon:after {
content: "";
display: none;
width: 45px;
height: 45px;
position: absolute;
top: 0;
left: 0;
background: url("http://www.dasunddas.de/img/base/shop_icons.png?v=63") no-repeat scroll 0 -50px transparent;
}
span.full_screen_icon:hover:after {
display: block;
}
div.addMore:hover span.full_screen_icon {
opacity:1;
right: 0;
top: 0;
}
This is tricky!
Related
I am trying to change the navigation arrows and dots of "react-owl-carousel"(npm package) using CSS or JS for the past 2 days but unfortunately, I'm not successfully doing it. I don't want to use jQuery in that project.
I want to change these in this shape/style.👇
"Select the arrows ( id - class name) whatever is provided to you by the library, you can see it from the dom inspector and then over right it with your custom CSS."
So, I did this. It works perfectly! Thanks, -Aly Abd El Rahman
::scss::
#root {
.App {
.owl-carousel {
.owl-nav {
.owl-prev {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
left: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%);
span {
visibility: hidden;
}
}
.owl-next {
height: 80px;
width: 40px;
position: absolute;
top: 47%;
transform: translateY(-50%);
cursor: pointer;
right: 21px;
background: transparent
url(../../../assets/arrow-left-dark.svg) no-repeat 50%;
transform: translateY(-50%) rotate(180deg);
span {
visibility: hidden;
}
}
}
.owl-dots {
position: absolute;
top: 89%;
left: 25vw;
.active {
background-color: white !important;
height: 10px !important;
width: 10px !important;
transition: all 0.3s linear !important;
}
.owl-dot {
background: hsla(0, 0%, 100%, 0.3);
display: inline-block;
height: 8px;
width: 8px;
margin-right: 30px;
vertical-align: middle;
border: none;
transition: all 0.3s linear;
span {
visibility: hidden;
}
}
}
}
}
}
I am using an animated arrow with the following code:
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
The issue is that when I click on the two arrow lines, the onclick() does not work. It works only if I click in the surrounding area of the two lines, that is enclosed by the border of the parent div with id start-arrow.
The desired behavior is for the onclick to work in the entire area enclosed by the start-arrow div.
I tried using z-index to make the start-arrow div be on top, but it's not working. I tried messing with display and also with position of the elements in CSS but no luck as well. However I should mention that I'm looking for a solution that does not include changing the position attributes of the elements.
How can I make the onclick fire regardless of where I click in the start-arrow div area?
EDIT: it seems to be working a lot better inside Stack Overflow, why? However if a click on top of the border of each line, it doesn't always work. I am opening mine (exact same code) in Firefox (it doesn't work inside my asp.net either).
Why don't we simply wrap the elements into another parent element and bind the event on that? I am able to solve it using a parent element ('parent-id').
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div id="parent-id" onclick="startDownload()">
<div class="arrow" id="start-arrow" style="z-
index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
</div>
let parent = document.getElementById("start-arrow");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
function startDownload() {
alert("Hi");
}
.arrow {
cursor: pointer;
height: 120px;
position: relative;
transition: transform 0.1s;
width: 80px;
/*display: inline-block;*/
}
.arrow-top, .arrow-bottom {
background-color: #666;
height: 4px;
left: -5px;
position: absolute;
top: 50%;
width: 100%;
}
.arrow-top:after, .arrow-bottom:after {
background-color: #fff;
content: '';
height: 100%;
position: absolute;
top: 0;
transition: all 0.15s;
}
.arrow-top {
transform: rotate(45deg);
transform-origin: bottom right;
}
.arrow-top:after {
left: 100%;
right: 0;
transition-delay: 0s;
}
.arrow-bottom {
transform: rotate(-45deg);
transform-origin: top right;
}
.arrow-bottom:after {
left: 0;
right: 100%;
transition-delay: 0.15s;
}
.arrow:hover .arrow-top:after {
left: 0;
transition-delay: 0.15s;
}
.arrow:hover .arrow-bottom:after {
right: 0;
transition-delay: 0s;
}
.arrow:active {
transform: translateX(-50%) translateY(-50%) scale(0.9);
}
<style type="text/css">
body {
background-color: black;
/*background-color: #2B2A3F;*/
}
</style>
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
This is not the most optimize solution, but it should do the trick, other solution is to increase click box by adding it padding.
let parent = document.getElementById("filterInput");
for(let element of parent.children){
element.addEventListener("click", startDownload)
}
The problem is you're attaching a click event listener. That means if you want it to fire, the element needs to be clicked & released.
If you click on your element, it moves to the upper-left. Now if you're slow enough the element isn't below your mouse pointer anymore, thus the click event won't fire because you released the mouse somewhere below.
So simply replace
onclick="startDownload()"
by
onmousedown="startDownload()"
and make sure you don't have an alert dialog in the callback function since it would stop the movement of your arrow. Simply trace something using console.log("fired");
Do it with jquery. Use the id start-arrow
<div class="arrow" id="start-arrow" onclick="startDownload()" style="z-index: 10;">
<div class="arrow-top" style="border:1px solid black; z-index: 9;"></div>
<div class="arrow-bottom" style="border:1px solid black; z-index: 9;"></div>
</div>
Try this:
$(document).on('click','#start-arrow',function(){
alert('Hi');
});
I have some skill bars on my page like this:
And I am using the following CSS to do the animation.
.progress {
height: 10px;
background: #333;
border-radius: 0;
box-shadow: none;
margin-bottom: 30px;
overflow: visible;
}
.progress .progress-bar {
position: relative;
-webkit-animation: animate-positive 2s;
animation: animate-positive 2s;
}
.progress .progress-bar:after {
content: "";
display: inline-block;
width: 9px;
background: #fff;
position: absolute;
top: -10px;
bottom: -10px;
right: -1px;
z-index: 1;
transform: rotate(35deg);
}
.progress .progress-value {
display: block;
font-size: 16px;
font-weight: 600;
color: #333;
position: absolute;
top: -30px;
right: -25px;
}
#-webkit-keyframes animate-positive {
0% {
width: 0;
}
}
#keyframes animate-positive {
0% {
width: 0;
}
}
<div class="progress">
<div class="progress-bar" style="width:60%; background:linear-gradient(to bottom right, #a1c4fd, #c2e9fb);">
<div class="progress-value">60%</div>
</div>
</div>
How to make them stay at 0% until I scroll to this part? I know the scrollTo function in jQuery but I don't know how to apply to this one.
You can use wowjs alongwith animate.css! It's simple and you can apply effects on any element when it enters the viewport. It also gives you options to manipulate animation delay, animation duration and more.
Here are the links:
WowJS:
http://mynameismatthieu.com/WOW/
AnimateCSS
https://daneden.github.io/animate.css/
1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});
All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>
I have the following: http://jsfiddle.net/yHPTv/2491/
I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
left: auto;
right: 0;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.
Thanks.
As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
transform:translateX(100%);
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
transform:translateX(0)
}
Check the Demo Fiddle
Consider transitioning on right, from -100% to 0:
.block {
position: relative;
width: 500px;
height: 150px; /* shortened to fit in the "Run" window */
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
right: 0;
transition: 1s;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
For transition to work, you have to define the property you wish to change in both element states.
In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')
If you instead use something like:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
right: 0%;
}
It will work because we defined the 'right' property in both states ('.hidden' and ':hover')