Develop Reference

Scale a button when user hovers over it

The Codepen linked below is where I currently am stuck.
function startHover(e) {
btn.classList.add("btnPlaying")
}
function removeHover(e) {
btn.classList.remove("btnPlaying");
}
const btn = document.querySelector('.btn')
btn.addEventListener("mouseenter", startHover);
btn.addEventListener('transitionend', removeHover);
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
transition: all 1.07s ease;
}
.btnPlaying {
transform: scale(1.1);
}
<button class="btn">Play!</button>
https://codepen.io/TerrellsCode/pen/zYEyORB
The button grows and shrinks like intended but only does it one time. Look for any pointers on how to make this grow/shrink animation loop infinitely as long as user is hovering over button. Thank You

No need for JavaScript. With CSS Keyframes you can create and run animations. Toggle the animation-play-state with the :hover selector to start and pause the animation.
#keyframes grow-shrink {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
animation-name: grow-shrink;
animation-duration: 1.07s;
animation-timing-function: ease;
animation-fill-mode: backwards;
animation-direction: alternate;
animation-play-state: paused;
animation-iteration-count: infinite;
}
.btn:hover {
animation-play-state: running;
}
<button class="btn">Play!</button>

You dont need javascript to create such animation, use css keyframes and infinite animation.
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255,204,3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53,106,188);
}
.btn:hover {
animation: btnPlaying 1s infinite;
}
#keyframes btnPlaying {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}

I want to put the effect of the hover only on 1 element however 2 element was applied

Hi I have a button element that slide to the picture and I want the picture to be blurred when the button appeared however the button also blurring upon hovering I want only the image to be have that effect please help me! How can I do that? Excuse my english please. I am also a beginner. Thank you in advance.
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>

You have to put blur 0px on other classes:
.Aljon { /* This is an image */
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 2;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 500px;
top: 400px;
position: relative;
transition: 0.3s ease-in-out;
z-index: 3;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.Aljon:hover #myBtn {
left: 200px;
transition: 0.3s ease-in-out;
filter: blur(0px);
}
.Aljon:hover {
filter: blur(8px);
}
.container:hover .Aljon {
opacity: 1;
transition: 0.3s ease-in-out;
cursor: pointer;
filter: blur(0px);
}
<div class="container">
<div class="Aljon">
<div class="overlay">
<button id="myBtn" class="button">HIRE ME</button>
</div>
</div>
</div>

Thank you everyone. Here's how I fixed my code I let my button out inside the div of the image and manually add or style them on css.
.Aljon {
width: 484px;
height: 612px;
position: absolute;
left: 65%;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
margin: 0;
padding: 0;
background-image: url(../Resources/Aljon.png);
animation: aljon-load 300ms ease 200ms;
transform: translateY(150%);
animation-fill-mode: forwards;
transition: 1s ease;
z-index: 4;
}
#keyframes aljon-load {
0% {
transform: translateY(150%);
}
100% {
transform: translateX(0);
}
}
#myBtn {
background-color: #ffffff;
border: none;
color: rgb(2, 2, 2);
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
font-family: Arial Rounded MT;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
left: 1500px;
top: 400px;
position: relative;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
z-index: 4;
transition: 0.3s ease;
}
.Aljon:hover ~ #myBtn {
left: 1010px;
transition: 0.3s ease;
}
#myBtn:hover {
left: 1010px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container:hover .Aljon {
filter: blur(2px);
}
<div class="container">
<div class="Aljon">
</div>
<button id="myBtn" class="button">HIRE ME</button>
</div>

Scale down a border-radius div element and keep in same position, egg shape

I have a div element in the shape of an egg and rotated 140 degrees.
HTML:
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
CSS:
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(140deg);
opacity: 0.8;
}
.egg-lg {
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-md {
/* How to scale down correctly? */
}
.egg-sm {
/* How to scale down correctly? */
}
.egg-xs {
/* How to scale down correctly? */
}
My goal is to leverage JavaScript to simply switch classes between large, medium, small and extra small. I know how to employ toggling classes.
But I'm having trouble connecting the dots on styling this correctly when classes change between -lg, -md, -sm, -xs. It looks too snappy, choppy, etc.
Another way to imagine this outside of code is a flower blooming. When I toggle the class with JavaScript, that's essentially what I am trying to accomplish. Do note, the red circle styling is there to act as a visual center.
I want that egg that you see illustrated to maintain its aspect ratio AND its rotation. Simply scale the element bigger or smaller, depending on the applied class selector.
I figure the root of my problem at the moment is that I am hard-coding pixel widths and heights.
If you have any ideas, please chime in.
Here is the fiddle: https://jsfiddle.net/excqrun0/12/
Thank you.

you can use transform : scale(0.5); to scale down the element : https://www.w3schools.com/css/css3_2dtransforms.asp
and you can add it to your previous transform like transform: rotate(140deg) scale(1); , move the width and height and other stuff to the id egg-blue and fill the classes with the new transform , and use javascript to switch between the classes :
var egg = document.getElementById('egg-blue');
document.getElementById('big').addEventListener('click', function(){
egg.classList.add("egg-large");
egg.classList.remove("egg-medium");
egg.classList.remove("egg-small");
});
document.getElementById('medium').addEventListener('click', function(){
egg.classList.add("egg-medium");
egg.classList.remove("egg-large");
egg.classList.remove("egg-small");
});
document.getElementById('small').addEventListener('click', function(){
egg.classList.add("egg-small");
egg.classList.remove("egg-large");
egg.classList.remove("egg-medium");
});
#egg-container {
width: 150px;
height: 150px;
position: relative;
border-radius: 50%;
border: 1px solid red;
margin: 0 auto;
}
.egg {
position: absolute;
background-image: radial-gradient(#00F9AF, #0054FD 70%);
box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.5) inset, 0px 0px 2px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
transition: all 1.0s ease;
height: 10px;
width: 10px;
top: 75px;
}
#egg-blue {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
opacity: 0.8;
top: 25px;
right: -25px;
height: 160px;
width: 140px;
}
.egg-large {
transform: rotate(140deg) scale(1);
}
.egg-medium {
transform: rotate(140deg) scale(0.7);
}
.egg-small {
transform: rotate(140deg) scale(0.4);
}
#buttons{
position: absolute;
bottom: 0;
}
<div id="egg-container">
<div id="egg-blue" class="egg egg-large"></div>
</div>
<div id="buttons">
<button id="big"> BIG </button>
<button id="medium"> MEDium </button>
<button id="small"> small </button>
</div>

How to position awesome font on img and mimic hover properties

I would like to put social media icons under the image beside the title of the photo. I.E facebook, twitter, Soundcloud and Instagram. I would like the social media icons to rotate with the image when the image is hovered over.
HTML
<div class="polaroid-images">
<a href="" title="Alex" ><img height="200" src="Alexandra.jpg" alt="Island" title="Alex" class=fishes /></a>
<i class="fa fa-facebook fa-3x"></i>
</div>
CSS
.polaroid-images a
{
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
.polaroid-images a, :after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a, i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index:10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
box-shadow: 0 10px 20px rgba(0,0,0,.7);
}
.polaroid-images i {
z-index: 11;
padding 30px 25px 15px;
margin-right: 10px 22px 30px ;
position: absolute;
top: 25%;
left: 25%;
transform: translate(1%, 1%);
overflow: hidden;
}

Just add the same transition on hover to the i. Like this:
.polaroid-images:hover i {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
}

Put it in the a and style it similarly to how you styled the :after that holds the image a title
.polaroid-images a {
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index: 0;
position: relative;
}
.polaroid-images a,
:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top: 15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a,
i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index: 10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.polaroid-images i {
position: relative;
font-size: 1em;
top: 15px;
margin-right: .5em;
color: #3b5998;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="polaroid-images">
<img height="200" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island" title="Alex" class=fishes /><i class="fa fa-facebook fa-3x"></i>
</div>

Popup Not Center of Screen - CSS Issue

I've adapted some code that I have sourced which shows a popup after X seconds. The JavaScript functionality seems fine, the issue is that whatever I try I am unable to center the popup in the middle of the screen.
Please see the popup here:
http://ts564737-container.zoeysite.com/
I have tried wrapping the popup in another div, setting that div to width: 100% andposition: fixed then setting the popup container to margin: 0 auto, without success.
I have also tried various display and position properties. What I understand is that the popup container doesn't have anything to be the center of, which is why I tried to wrap it inside another div but I'm unable to make this work as I wish.
Please see my code below:
CSS:
#wd1_nlpopup {
display: none;
position: absolute;
margin: 0 auto !important;
top: 200px !important;
padding-top: 10px;
z-index: 9999;
background: white;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wd1_nlpopup_close {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
right: 0;
top: 0;
position: absolute;
background-color: #000000;
color: #ffffff;
transition: all 0.2s;
font-size: 18px;
}
#wd1_nlpopup_close:hover {
background-color: #666666;
transition: all 0.2s;
color: #ffffff !important;
text-decoration: none !important;
}
HTML:
<div id="wd1_nlpopup" data-expires="30" data-delay="1">
X
<script type="text/javascript" src="https://form.jotformeu.com/jsform/62332622875356"></script>
</div>
JavaScript:
jQuery(document).ready(function(jQuery){
var wd1_nlpopup_expires = jQuery("#wd1_nlpopup").data("expires");
var wd1_nlpopup_delay = jQuery("#wd1_nlpopup").data("delay") * 1000;
jQuery('#wd1_nlpopup_close').on('click', function(e){
jQuery.cookie('wd1_nlpopup', 'closed', { expires: wd1_nlpopup_expires, path: '/' });
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeOut(200);
e.preventDefault();
});
if(jQuery.cookie('wd1_nlpopup') != 'closed' ){
setTimeout(wd1_open_nlpopup, wd1_nlpopup_delay);
}
function wd1_open_nlpopup(){
var topoffset = jQuery(document).scrollTop(),
viewportHeight = jQuery(window).height(),
jQuerypopup = jQuery('#wd1_nlpopup');
var calculatedOffset = (topoffset + (Math.round(viewportHeight/2))) - (Math.round(jQuerypopup.outerHeight()/2));
if(calculatedOffset <= 40){
calculatedOffset = 40;
}
jQuerypopup.css('top', calculatedOffset);
jQuery('#wd1_nlpopup,#wd1_nlpopup_overlay').fadeIn(500);
}
});
/* jQuery Cookie Plugin v1.3.1 */
(function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a);}else{a(jQuery);}}(function(e){var a=/\+/g;function d(g){return g;}function b(g){return decodeURIComponent(g.replace(a," "));}function f(g){if(g.indexOf('"')===0){g=g.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\");}try{return c.json?JSON.parse(g):g;}catch(h){}}var c=e.cookie=function(p,o,u){if(o!==undefined){u=e.extend({},c.defaults,u);if(typeof u.expires==="number"){var q=u.expires,s=u.expires=new Date();s.setDate(s.getDate()+q);}o=c.json?JSON.stringify(o):String(o);return(document.cookie=[c.raw?p:encodeURIComponent(p),"=",c.raw?o:encodeURIComponent(o),u.expires?"; expires="+u.expires.toUTCString():"",u.path?"; path="+u.path:"",u.domain?"; domain="+u.domain:"",u.secure?"; secure":""].join(""));}var g=c.raw?d:b;var r=document.cookie.split("; ");var v=p?undefined:{};for(var n=0,k=r.length;n<k;n++){var m=r[n].split("=");var h=g(m.shift());var j=g(m.join("="));if(p&&p===h){v=f(j);break;}if(!p){v[h]=f(j);}}return v;};c.defaults={};e.removeCookie=function(h,g){if(e.cookie(h)!==undefined){e.cookie(h,"",e.extend(g,{expires:-1}));return true;}return false;};}));
Would anybody please be able to advise on where I'm going wrong with my CSS? Any help is very much appreciated. Thank you for your time.

Add this css to your #wd1_nlpopup
{
top: 50%;
transform: translateY(-50%);
width: 600px; // add a size for your modal
left: 0;
right: 0;
}
The final css:
#wd1_nlpopup {
display: block;
position: absolute;
margin: 0 auto !important;
top: 50%;
transform: translateY(-50%);
right: 0;
left: 0;
width: 600px;
padding-top: 10px;
z-index: 9999;
background: white;
-webkit-box-shadow: 0 0 20px #000;
box-shadow: 0 0 20px #000;
border-radius: 5px;
border: 5px solid rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wd1_nlpopup_close {
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
right: 0;
top: 0;
position: absolute;
background-color: #000000;
color: #ffffff;
transition: all 0.2s;
font-size: 18px;
}
#wd1_nlpopup_close:hover {
background-color: #666666;
transition: all 0.2s;
color: #ffffff !important;
text-decoration: none !important;
}

wd1_nlpopup {
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}

By just a quick lookup !! try the below css. Change this to your css, hope it helps
#wd1_nlpopup {
margin: 10% 38% !important;
top: 0px !important;}