Hello people from StackOverflow.
I'm trying to do something exactly like in this website: http://anayafilms.com/ (work section).
It's basically an image but on mouse over, it gets darken, a text at the bottom and two "buttons" (just some font awesome icons in a circle), along with some basic animation.
So far I only have the image in a div and no idea on how to do that, so if anyone can help me out that'd be amazing.
Before and after, just to illustrate it in case you don't wanna go on the website
Depending on what you really need it to do, you might be able to do this without javascript. Here is an example that makes use of the css pseudo class :hover and some absolute positioning. I'm darkening the background, which you can set as an image, by using a layer above it with a opacity: .5 black background created using background: rgba(0,0,0,.5).
.css-rollover {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.css-rollover:hover .overlay {
opacity: 1;
pointer-events: all;
}
.bg {
width: 100%;
height: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5);
text-align: center;
color: #fff;
opacity: 0;
pointer-events: 0;
transition: opacity .2s;
}
.overlay p {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX( -50% );
}
.overlay .fa-links {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.overlay .fa-links a {
display: inline-block;
width: 20px;
height: 20px;
line-height:20px;
border-radius: 50%;
margin: 5px;
padding: 5px;
background: blue;
text-decoration: none;
color: #fff;
}
<div class="css-rollover">
<div class="bg" ></div>
<div class="overlay">
<div class="fa-links">
A
B
</div>
<p>You're hovering...</p></div>
</div>
Related
So I have a door animation using vanilla JS with CSS for the styling. Is there a way to hid the backside of the door when it's open?
As well as making the door not clickable. (I don't have it as toggle, but you can still interact with the button.)
Basically I just want a back background and not see the backwards "1" when the door is open.
Any ideas on how to make that happen? I imagine it's adding another div with style, but I really am not sure after goofing around with this for a while.
Cheers!
Codepen here: https://codepen.io/LovelyAndy/pen/LYZKEvB
HTML:
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
CSS
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top:50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: all 0.5s ease-in-out;
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px)
rotateY(-150deg);
}
.d1 {
top: 100px;
left: 60px;
}
JS
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
}
Possible solution: change the text color on transition:
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.toggle("doorOpen");
}
.door-back {
position: relative;
height: 105px;
width: 105px;
background-image: url("https://i.redd.it/e84gxikhoul21.jpg");
border-radius: 50px;
background-size: cover;
margin: 0 auto;
margin-top: 50px;
}
.door {
position: absolute;
height: 105px;
width: 105px;
font-size: 1.5em;
color: white;
border: 2px solid goldenrod;
border-radius: 50px;
background: black;
cursor: pointer;
transform-origin: left;
transition: transform .5s ease-in-out,
color 0s .3s linear
}
.doorOpen {
transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-150deg);
color:black;
}
.d1 {
top: 100px;
left: 60px;
}
<div>
<div class="door-back">
<button class="door">1</button>
</div>
</div>
You can achieve both disable the click on door button and not to show the '1' after the door is open in CSS.
.doorOpen {
...other css
// you just need add this property which disables click
pointer-events: none;
color: black;
}
Making the text color black will make it complete black.
If you completely want to remove the text '1' then you can do like below.
const doorEl = document.querySelector(".door");
doorEl.addEventListener('click', openTheDoor)
function openTheDoor() {
doorEl.classList.add("doorOpen");
doorEl.textContent='';
}
These are two ways I can think of.
You can try to do something like this https://codepen.io/dom-the-dev/pen/MWeqaJq just have a button on the opposite side that acts like the back of the door
<div>
<div class="door-back">
<button class="door front">1</button>
<button class="door back">2</button>
</div>
I just want to have a loading animation with grayed-out background upon clicking TestLoading button. But I can't get it right. The loading gif is slightly in the left side but I want it in the center. Also grayed-out background is not working.
Here's my css:
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
}
.divLoaderContent {
position: absolute;
color: White;
top: 50%;
left: 40%;
}
In my view, I have this:
<!--LOADER -->
<div id="divProcessing" class="divLoader">
<p class="divLoaderContent"><img src="~/Content/image/blocks.gif"></p>
</div>
and
$('#btnRoster1').click(function(e) {
$("#divProcessing").show();
});
Here is revised version of css:
.divLoader{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(67, 71, 75, 0.8);
z-index: 30001;
}
.divLoaderContent{
position: absolute;
color: White;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
And don't use p tag for img container. Use div instead
To animate .show() use
$('#btnRoster1').click(function(e) {
$("#divProcessing").show(800);
});
where 800 is 0.8 sec.
To align the gif you can use flex and get rid of absolute positioning:
.divLoaderContent {
color: White;
display: flex;
justify-content: center;
}
Moving elements (especially img tags) with top/left based on percentages can get messy because it depends on the img size. I recommend using flex with this approach. The justify-content will center the children horizontally and align-items will center vertically when display is flex
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
display: none;
justify-content: center;
align-items: center;
}
Then have your js just modify display in css to flex when you want it to show, then display: none when you want it to hide;
$('#btnRoster1').click(function(e) {
$("#divProcessing").css('display', 'flex');
});
Fiddle below (has a timeout after 3 seconds to simulate something loading) I took out the unnecessary <p> tag as well.
https://jsfiddle.net/Garrito/vh2ttmu9/35/
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
I have a few images where I'd like half borders to the top right corner and to the bottom left corner. The problems I am running into are:
problem 1: I have managed to cut of borders at all four corners, but can't cut of top left and bottom right. code below (I'm using this fiddle provided by KillaCam, and experimented a little, with the result that all four corners appear at first and then three of them disappears! : http://jsfiddle.net/3jo5btxd/
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;transition: border 2000ms ease 0s;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
Problem 2 I already have a panel that has a link vertically centered using the css table method, which is also visible on hover. When I combine the panel's code with the corner borders, my vertical centering goes out of whack! I guess that is happening because of the extra div I am using for borders, but I haven't managed to make the corners with :before (doesn't work on hover). HTML and css below and the also the image showing what I want to make:
<ul class="img-list">
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/adventure/">
<img src="something.jpg"/>
<span class="text-content">
<span>Adventure</span>
</span>
</a>
</li>
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/beach-2/">
<img src="something2.jpg" />
<span class="text-content">
<span>Beach</span>
</span>
</a>
</li> </ul>
CSS:
/*css for the categories on home page*/
.img-list{margin:0;padding:0; list-style:none}
ul.img-list li {
display: inline-block;
height: 20em;
margin: 0;
position: relative;
}
.category_lists.one-third{width:33%; margin-left:0;}
.category_lists img{width:100%; height:auto;}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(38,196,83,0.7);
color: white;
cursor: pointer;
display: table;
height: 7em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
font-size:42px;
text-transform:uppercase;
font-family: 'Raleway', sans-serif; font-weight:300
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
And the image showing what I want to make: http://tinypic.com/r/2gy5zk4/8 .
If I have to use javascript, I will, but I am not very good at it, so counting on css to make it work. Thanks a lot for any help.
Here's one solution: http://jsfiddle.net/f7u6yxLq/.
HTML:
<div></div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
div {
position: relative;
display: table;
width: 200px;
height: 100px;
background: url("http://placehold.it/200x100")
no-repeat
top left;
}
div:before,
div:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
border: solid white;
border-width: 2px 2px 0 0;
display: none;
}
div:before {
right: 5px;
top: 5px;
}
div:after {
border-width: 0 0 2px 2px;
bottom: 5px;
left: 5px;
}
div:hover:after,
div:hover:before {
display: block;
}
Solution for problem #1: http://jsfiddle.net/3jo5btxd/2/
.div2:before, .div2:after {width:9px; height:9px; position: absolute;background:#fff; content:'';}
.div2:before {top:0; left:0;}
.div2:after {bottom:0; right:0; }
I have the following code:
HTML CODE:
<table border=0 cellpadding=0 cellspacing=0 width=250px bgcolor=#FF0000>
<tr>
<td align=right><span id=spnMain></span>
</td>
</tr>
</table>
CSS CODE:
#spnMain {
background: url("theImages/searchButton.png") no-repeat;
background-position: 0px 0px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain span {
background: url("theImages/searchButton.png");
display: block;
height: 50px;
background-position: 0px -56px;
}
JS CODE:
$(document).ready(function () {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({
"opacity": 0
});
$("#spnMain").hover(function () {
$(this).children("span").animate({
"opacity": 1
}, 400);
}, function () {
$(this).children("span").animate({
"opacity": 0
}, 400);
});
});
Produces the following (the top is onload and the bottom when mouse is hovered:
How can I make the green button fade in on top of the purple button so it hides it?
I know you ask for a javascript solution but you can do the same thing with css only (if you want to)
Way 1, sprites, no animation though: http://jsfiddle.net/NicoO/WBjS5/
Way 2, two images, css transition (a bit hacky): http://jsfiddle.net/NicoO/WBjS5/6/
#spnMain
{
display: block;
height: 28px;
width: 28px;
background-image: url(**url to green button image**);
background-position: 0% 0%;
position: relative;
}
#spnMain:after
{
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
content:"";
transition-duration: 0.4s;
visibility: hidden;
opacity: 0;
background-image: url(**url to red button image**);
}
#spnMain:hover:after
{
visibility: visible;
opacity: 1;
}
Update the visibility property helps for IE8 support- no transition will occur, but the image will be swapped on mouse over. What should be good enough of a fallback for old "browsers".
#spnMain {
position: relative;
/* ... same as before ... */
}
#spnMain span {
position: absolute;
top: 0;
right: 0;
/* ... same as before */
}
And your answer is:
Fiddle link: http://jsfiddle.net/LNQq3/4/
CSS Code:
#spnMain {
background: url("http://s18.postimg.org/balg05zj9/gogo.gif?noCache=1393616120") no-repeat;
background-position: 0px -5px;
width: 28px;
display: block;
height: 28px;
cursor: pointer;
}
#spnMain:hover {
background-position: -37px -5px;
}
Have you tried using an absolute positioned element within a relative positioned element (http://css-tricks.com/absolute-positioning-inside-relative-positioning/)?
I have put together a quick jsfiddle demonstrating this: http://jsfiddle.net/9xENQ/
I just grabbed a quick GO/STOP image sprite and didn't take the time to really look into the necessary background-position to make it line up perfectly. Just wanted to convey the concept.
The HTML:
<div class="button-container">
Hi here is a bunch of text with a padding right to keep it from bleeding into the image.
<span id="spnMain"></span>
</div>
The CSS:
.button-container {
position: relative;
padding-right: 160px;
width: 158px;
height: 163px;
border: 1px solid black;
}
#spnMain {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA") no-repeat;
background-position: 0px 0px;
width: 158px;
display: block;
height: 163px;
cursor: pointer;
position: absolute;
top: 0;
left: 100%;
margin-left: -158px;
}
#spnMain span {
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ2m3WvngUNXOeQ4oItfopBO5VSA3OP7hhaHsjMrwHLlzYR4KeZPA");
display: block;
width: 158px;
height: 163px;
background-position: -158px 0px;
position: absolute;
left: 100%;
top: 0;
margin-left: -158px;
}
Your JavaScript (as is):
$(document).ready(function() {
$("#spnMain").wrapInner("<span></span>");
$("#spnMain span").css({"opacity" : 0});
$("#spnMain").hover(function(){
$(this).children("span").animate({"opacity" : 1}, 400);
}, function(){
$(this).children("span").animate({"opacity" : 0}, 400);
});
});