We Keep Coding

HTML - Second IMG hover issue

I have 2 semicircles stuck next to each other forming a circle. When I hover on the left semicircle, the right one lowers it's opacity (which is what is supposed to do) but when I hover on the right one, the opacity doesn't change at all.
HTML:
<div id="animation-components">
<img src="leftball.svg" alt="" class="animation-item-01">
<img src="rightball.svg" alt="" class="animation-item-02">
</div>
CSS:
#animation-components {}
.animation-item-01 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(631px,80px);
height: 320px;
transition: opacity ease 0.5s;
}
.animation-item-02 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(627px,80px);
height: 320px;
transition: opacity ease 0.5s;
}
.animation-item-01:hover + .animation-item-02{
opacity: 50%;
}
.animation-item-02:hover + .animation-item-01{
opacity: 50%;
}
What can I alter to make this work?

The issue is that you can only select the next sibling with the adjacent sibling selector.
.element-1 + .element-2 /* good */
.element-2 + .element-1 /* not so good */
Since .animation-item-02 comes after .animation-item-01, there is no way to select the previous .animation-item-01 from .animation-item-02
Doing the following will fix the issue:
#animation-components:hover > div {
opacity: 50%;
}
#animation-components > div:hover {
opacity: 100%;
}

CSS Combinators can't be used to apply styles to elements before target element.
The adjacent sibling selector (+) will aply to all adjacent elements, not to it's opposite elements.
CSS It's in the name: Cascading Style Sheets only supports styling in cascading direction, not up.
To achieve the desired, you can do the folowwing:
#animation-components:hover img {
opacity: .5;
}
#animation-components img:hover{
opacity: 1;
}
<div id="animation-components">
<img src="https://via.placeholder.com/150.png/ff0000" alt="" class="animation-item-01">
<img src="https://via.placeholder.com/150.png/ff0000" alt="" class="animation-item-02">
</div>

It might just be me but I find it heaps easier to throw in just a little bit of javascript and avoid messy css combinators. Heres my fix, script goes anywhere in your html file, I put it after the closing body tag.
<script>
function fadeOut(obj) {
document.getElementById(obj).style.animationName = "fadeOut";
}
function fadeIn(obj) {
document.getElementById(obj).style.animationName = "fadeIn";
}
</script>
#item1 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(631px,80px);
height: 320px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#item2 {
display: inline;
position: relative;
margin-bottom: 240px;
margin-top: 100px;
transform: translate(627px,80px);
height: 320px;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
0%{opacity: 1;}
100%{opacity: 0.5;}
}
#keyframes fadeIn {
0%{opacity: 0.5;}
100%{opacity: 1;}
}
<div id="animation-components">
<img src="leftball.svg" alt="" id="item1" onmouseover="fadeOut('item1')" onmouseout="fadeIn('item1')">
<img src="rightball.svg" alt="" id="item2" onmouseover="fadeOut('item2')" onmouseout="fadeIn('item2')">
</div>
Also its just a me thing, but you have class attributes where id attributes should be. If your applying seperate styles to two completely seperate elements its a good idea to use id, but if your applying same style to two elements

Jimdo: Create rotating clipped disk on button click

I'm trying to create a rotating CD/Disk effect when the play button is clicked. I managed to come up with an example, see the code below. This is partially the state of the player when it is in play mode.
What I would like to create is have a square image with a play button on top. When the user clicks the button, the pause button appears and the middle part of the image starts rotating like a spinning CD/Disk.
I have tried a few things but my skills in JavaScript are lacking to create such an effect.
Any help is appreciated.
NOTE: The code answer should be able to work on the Jimdo site builder.
$(function() {
var activePlayerStartBtn;
function stopOtherPlayerSetNewAsActive(element) {
var toShow = $(element).parent().find('.btn.hide')[0];
$(element).addClass('hide');
$(toShow).removeClass('hide');
if (activePlayerStartBtn) {
var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
$(stopButton).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
}
activePlayerStartBtn = element;
}
function stopPlayer(element) {
$(element).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
activePlayerStartBtn = null;
}
var widget1 = SC.Widget("so");
$("#playSound").click(function() {
widget1.play();
stopOtherPlayerSetNewAsActive("#playSound");
});
$("#stopSound").click(function() {
widget1.pause();
stopPlayer('#stopSound');
});
});
.button-wrapper {
position: relative;
width: 100%;
max-width: 300px;
}
.img-circle {
clip-path: circle(30% at 50% 50%);
-webkit-clip-path: circle(30% at 50% 50%);
animation: loading 10s linear infinite;
width: 100%;
max-width: 300px;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.btn {
position: absolute;
width: 100%;
max-width: 70px;
cursor: pointer;
transform: translate(-50%, -53%);
top: 50%;
left: 50%;
opacity: .7;
clip-path: circle(33% at 50% 50%);
-webkit-clip-path: circle(33% at 50% 50%);
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>
<div class="button-wrapper">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">
<img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
<img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>
<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false"
frameborder="0" name="so" style="display: none;"></iframe>

I think this might be what you are looking for.
jsFiddle with rotating Disk example
Let me explain what is happening so you understand what the code and styles do.
I've added the album image twice, one is the background, one is used to create the rotating disk. It looks like this.
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle -clipped">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle">
You don't see the clipped image, it only is noticed when the animation starts.
When a player is clicked, the -rotating class is added to start the animation.
// Find the clippedImg and add the class -rotating to start the animation
var clippedImg = $(element).parent().find('.-clipped')[0];
$(clippedImg).addClass('-rotating');
When the pause button is clicked, the -rotating class is removed.
Let me know if that's what you are looking for.

I believe you should be able to utilize the css property animation-play-state: paused;
$(function() {
var activePlayerStartBtn;
function stopOtherPlayerSetNewAsActive(element) {
var toShow = $(element).parent().find('.btn.hide')[0];
$(element).addClass('hide');
$(toShow).removeClass('hide');
$('.img-circle').removeClass('paused');
if (activePlayerStartBtn) {
var stopButton = $(activePlayerStartBtn).parent().find('.btn').not('.hide')[0];
$(stopButton).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
}
activePlayerStartBtn = element;
}
function stopPlayer(element) {
$(element).addClass('hide');
$(activePlayerStartBtn).removeClass('hide');
$('.img-circle').addClass('paused');
activePlayerStartBtn = null;
}
var widget1 = SC.Widget("so");
$("#playSound").click(function() {
widget1.play();
stopOtherPlayerSetNewAsActive("#playSound");
});
$("#stopSound").click(function() {
widget1.pause();
stopPlayer('#stopSound');
});
});
.button-wrapper {
position: relative;
width: 100%;
max-width: 300px;
}
.img-circle {
clip-path: circle(30% at 50% 50%);
-webkit-clip-path: circle(30% at 50% 50%);
animation: loading 10s linear infinite;
width: 100%;
max-width: 300px;
}
.paused {
animation-play-state: paused;
}
#keyframes loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.btn {
position: absolute;
width: 100%;
max-width: 70px;
cursor: pointer;
transform: translate(-50%, -53%);
top: 50%;
left: 50%;
opacity: .7;
clip-path: circle(33% at 50% 50%);
-webkit-clip-path: circle(33% at 50% 50%);
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/js/api.js">
</script>
<div class="button-wrapper">
<img src="https://i1.sndcdn.com/artworks-000281899403-n7tdjo-t500x500.jpg" alt="img" class="img-circle paused">
<img id="playSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-playbtn.svg" alt="play" title="play" class="btn" name="playSound">
<img id="stopSound" src="https://u.jimcdn.com/cms/o/s64e01451c5929131/userlayout/font/sc-pausebtn.svg" alt="pause" title="pause" class="btn hide" name="stopSound">
</div>
<iframe id="so" width="0%" height="0" scrolling="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/380167502&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=false&show_reposts=false&show_teaser=false"
frameborder="0" name="so" style="display: none;"></iframe>

automatic cookie bar pure css works fine but need delay

I added this pure css cookie bar to my website and all works fine, the only problem is that when you enter in the site, you can see FIRST the cookie bar, AND the cookie bar go up and go down at the end.
How can see my cookie bar only go down when i enter in my site, i thought to change de thenimation delay, add set time out .... but nothing change !!
here is the original codepen and you can see what i want to change in it
www.codepen.io/natewiley/pen/uGtcD
HERE IS MY CODE
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" />
<div class="cookie-bar">
<div class="message">
This website uses cookies to give you an incredible experience. By using
this website you agree to the
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookieslinken" onclick="toggleOverlay()">terms</a>
</div>
</div>
<div class="mobile">
This website uses cookies,
<div class="buttoncookies-container">
<a style="letter-spacing: 1px;" class="buttoncookies" id="modalcookiesshortlink" onclick="toggleOverlay()">
learn more
</a>
</div>
</div>
<label for="checkbox-cb" class="close-cb">X</label>
</div>
</div>
HERE IS MY CSS
.cookie-bar { z-index:9996; position: fixed; width: 100%; top: 0; right: 0; left: 0; height: auto; padding: 20px; line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn .8s; animation-delay: .8s; display: inline-block; }
.mobile { display: none; }
#keyframes slideIn { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } }
.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; }
.close-cb:hover { color:#fff;; }
.checkbox-cb { display: none;}
#checkbox-cb:checked + .cookie-bar { transform: translateY(-1000px); }

Removing the line in css
animation-delay: .8s;
will give you the result
Make the animation last longer.
animation: slideIn 4s;
Plus add some trick to animation flow:
0% {
transform: translateY(-50px);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}

Pop up text boxes on hover on revolution slider [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am building a website that has a 3d front and back skeleton image using the revolution slider on a wordpress website.
I want to make it to when you hover over a specific area or point an text box pops up with text in it. I'm not sure how that is possible using the revolution slider.

I think you want something like this - requires a small bit of jquery
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
#container {
margin:0 auto;
max-width: 480px;
max-height:240px;
overflow:hidden;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.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__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
article{max-width:480px; max-height:240px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
</p>
</div>
</article>
<article class="caption">
<img class="caption__media" src="http://www.planetware.com/photos-large/USMI/michigan-ann-arbor-university.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Michigan</h1>
<p class="caption__overlay__content">
Some dummy text for testing
</p>
</div>
</article>
</div>
</div>

I'm really sorry that I won't be answering to your exact question, but I do believe that I still will be helpful.
I've used this exact functionality in most of my Wordpress sites and everytime I'm doing this with a free Wordpress plugin called text-hover. https://wordpress.org/plugins/text-hover/
It works like a charm! I hope I've been helpful!

Flip Menu with Fixed Top Menu

I have a doubt.
I need to implement a flip menu, but on the internet I found only examples using css transformations, and vendors prefix. But all examples show divs that are not fixed, and the css below have a fixed menu (copied and pasted code and reduce the net, is not very pretty) and when I have a menu and the approaches of put font and back divs don't work.
I need help with this. I need a way in which whole site (including the set menu) are replaced with other content (as a great turning of the page).
Example: http://davidwalsh.name/css-flip
I need a horizontal flip, and right horizontal flip.
Thank you so much.
CodePen: http://codepen.io/anon/pen/BuHql
HTML:
<div class="nav">
<ul>
<li>Home</li>
<li>CSS</li>
<li>PHP</li>
<li>SEO</li>
<li>jQuery</li>
<li>Wordpress</li>
<li>Services</li>
</ul>
<div class="clear"></div>
</div>
</div>
CSS:
body { height: 800px; background: black; }
.nav{ background: white; z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;}
.nav { height: 42px; background: white;}
.nav ul { list-style: none; }
.nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}
.nav ul li:first-child{ padding-left: 0;}
.nav ul li a { }
.nav ul li a:hover{ text-decoration: underline;}

An easy way to do this, in otherwise case, is using the following construction:
HTML:
<div class="flipper">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
CSS:
/*Placing colors to facilitate understanding.*/
.front { background: green; }
.back { background: red; }
/*Add this class to a ".flipper" element using the way that is well to you (using a click, a hover or any other trigger).*/
.flip {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
/*Add others vendors styles to more compatibility*/
}
/*Configuring the duration and the 3d mode of command*/
.flipper {
position: relative; /*relative is very important*/
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 2s;
-webkit-transition: 0.6s;
}
/*Required for no appear both at the same time*/
.front {
z-index: 2;
}
/*Causes the back start hidden (it is rotated 180 degrees, so it will not appear)*/
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/*Hide the rear face during the flip.*/
.front, .back {
position: relative; /*Again, the relative position is very important to work on any layout without crash.*/
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*needed for webkit browsers understand what's in front and what is behind*/
body {
perspective: 1000;
-webkit-perspective: 1000;
}
JS (jQuery) use example:
$('body').hover(function () {
$('.flipper').addClass('flip');
});
$('body').click(function () {
$('.flipper').removeClass('flip');
});

There is a simple jquery plugin that can help you achieving this effect.
You can find it here:
http://guilhemmarty.com/flippy//
It is easy to use and you can choose what kind of flip you want. ;)