I try to create a slider using CSS transforms combined with .addClass() and .removeClass(). So far it works fine, except for one thing:
While I remove .behind and add .behinder (which is a stupid name for a class), the images on the right side jump instantly to the left side and than transition themselves to the right again.
This causes some kind of "flickering", as you can see in this snippet:
var slider = $('#slider');
// to the right
var slideRight = function() {
// switch state
var dumb = slider.find('.behinder.left');
slider.find('.behinder.right').removeClass('right').addClass('left');
slider.find('.behind.right').removeClass('behind').addClass('behinder');
slider.find('.center').removeClass('center').addClass('behind right');
slider.find('.behind.left').removeClass('behind left').addClass('center');
dumb.removeClass('behinder').addClass('behind');
}
$('#right').on('click', function(){
slideRight();
});
body, html {
margin: 0% 5%;
}
#card-slider-fullwidth {
display: block;
width: 80%;
height: 300px;
max-width: 500px;
}
#slider {
position: relative;
}
#slider img {
position: absolute;
top: 0;
z-index: 10;
left: 50%;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#slider img.center {
z-index: 50;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
#slider img.behind {
z-index: 30;
-webkit-transform: translateX(-50%) scale(0.9);
transform: translateX(-50%) scale(0.9);
}
#slider img.behind.left {
margin-left: calc( (100% - 200px) / 3 * -1);
}
#slider img.behind.right {
margin-left: calc( (100% - 200px) / 3);
}
#slider img.behinder {
z-index: 10;
-webkit-transform: translateX(0) scale(0.8);
transform: translateX(0) scale(0.8);
}
#slider img.behinder.left {
left: 0;
right: auto;
margin-left: calc( (100% - 200px) / 8 * -1);
}
#slider img.behinder.right {
left: auto;
right: 0;
margin-right: calc( (100% - 200px) / 8 * -1);
}
#right {
padding: 20px;
background: #000;
display: inline-block;
color: #fff;
font-weight: bold;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">Switch, baby.</div>
<div id="card-slider-fullwidth">
<div id="slider">
<img src="https://unsplash.it/200/300/?image=100" alt="100" class="behinder left">
<img src="https://unsplash.it/200/300/?image=200" alt="200" class="behind left">
<img src="https://unsplash.it/200/300/?image=320" alt="300" class="center">
<img src="https://unsplash.it/200/300/?image=400" alt="400" class="behind right">
<img src="https://unsplash.it/200/300/?image=500" alt="500" class="behinder right">
</div>
</div>
How can I fix this?
There is a CODEPEN DEMO as well.
Ok actually the solution was quite simple. I have used two properties, to position the elements:
margin-left: x;
transform: translateX();
As at one point I have removed translateX(); completely, the images have been jumping. So to solve this problem, I rearranged the layout using only margin-left to offset the images.
You can check the working solution with an update of the scss:
img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
transition: all .3s ease-in-out;
&.center {
z-index: 50;
margin-left: 0;
}
&.behind {
z-index: 30;
margin-left: -20px;
transform: translateX(-50%) scale(.9);
&.right {
margin-left: 20px;
}
}
&.behinder {
z-index: 10;
margin-left: -40px;
transform: translateX(-50%) scale(.8);
&.right {
margin-left: 40px;
}
}
}
Related
I need to code a image that appears as a popup with the option to close it with a button. I already have the button style, I just need your help on how to code it together? Do you have any suggestions?
I have created a simple script for you with pure js. If you find this helpful. Select my answer and give +1.
document.querySelectorAll('.popup-img img').forEach(single=>{
single.addEventListener('click',(e)=>{
let img = e.target;
img.classList.add('popped');
let back = document.createElement('div');
back.classList.add('img-popup');
let close = document.createElement('span');
close.classList.add('close');
back.appendChild(close);
document.body.appendChild(back);
back.addEventListener('click',(e)=>{
back.classList.add('closed');
img.classList.remove('popped');
setTimeout(function(){
document.querySelector('.img-popup').remove();
},500)
})
})
})
.img-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.95);
transform: scale(1);
transition: .5s ease;
}
.img-popup.closed {
transform: scale(0);
}
.img-popup .close {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
cursor: pointer;
}
.img-popup .close:before, .img-popup .close:after {content: '';width: 24px;height: 2px;background: #fff;position: absolute;top: 0;left: 0;}
.img-popup .close:before {
transform: rotate(45deg);
transform-origin: left;
top: 13px;
left: 13px;
}
.img-popup .close:after {
transform: rotate(-45deg);
transform-origin: right;
top: 13px;
right: 10px;
left: initial;
}
img.popped {
position: fixed;
top: 50%;
left: 50%;
max-height: 85vh;
max-width: 85vw;
transform: translate(-50%,-50%);
transition: .5s ease;
z-index: 1;
}
<div>
<img src="https://preview.ibb.co/cyESoU/img1.jpg" width="200">
<div class="popup-img"><img src="https://preview.ibb.co/cyESoU/img1.jpg" width="250"></div>
</div>
I've set up a menu as pictured in the snippet below. I want the user to be able to hover over the central icon and then be able to select one of the buttons on the side. I've had some success by placing another, larger element in front of the icon when the icon is hovered on and then chaining some hovers together but then as soon as they hovered over a button all the other ones disappeared. I've also tried expanding the padding of the #navCont element but the buttons disappear when hovering over any of them (it also pushes all my content up if I expand the bottom area)
body {
background: #000;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
}
#title {
color: white;
width: 40%;
margin-bottom: 3vh;
}
#navCont {
position: relative;
top: 0;
}
#sqlogo {
opacity: .75;
width: 3em;
animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
#sqlogo:hover {
opacity: 1;
animation-play-state: paused;
}
#navCont .btn {
opacity: .75;
height: 1.5em;
display: none;
position: absolute;
}
#navCont:hover img.btn {
display: block;
}
#navCont .btn:hover {
opacity: 1;
}
#navCont #btnWork {
left: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnAbout {
right: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnContact {
top: 4em;
left: 50%;
transform: translateX(-50%);
}
<body>
<div class="main">
<div id="title"> Title </div>
<div id="navCont">
<img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
<img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
<img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
<img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
</div>
</div>
</div>
</body>
https://i.stack.imgur.com/qZDam.jpg
Ideally, I'd like the buttons to remain active while the cursor is in this area (see link above) after they have appeared via the icon, however, a rectangular area of that size would also be ok.
You could create an on hover event on your squid icon using javascript that when triggered keeps the menu content visible until a mouseout event on some larger parent area is triggered
Something like this:
document.getElementById("sqlogo").onmouseover = function(){
// show the buttons
getElementsByClassName("btn").style.display = "block"
};
document.getElementById("navCont").onmouseout = function(){
// hide the buttons
getElementsByClassName("btn").style.display = "none"
};
You might have to undo some of your CSS so that JS controls the visibility instead of CSS :hover
I found a workaround using JQuery. I just toggled the button visibility if the mouse didn't move to them fast enough after leaving the main icon
$("#sqlogo").mouseenter(function() {
$("#sqlogo").addClass("freeze");
$(".btn").addClass("vis");
});
let t;
$("#sqlogo").mouseleave(function() {
t = setTimeout(function() {
$("#sqlogo").removeClass("freeze");
$(".btn").removeClass("vis");
}, 500);
});
$(".btn").mouseenter(function() {
clearTimeout(t);
});
$(".btn").mouseleave(function() {
$("#sqlogo").removeClass("freeze");
$(".btn").removeClass("vis");
});
body {
background: #000;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
}
#title {
color: white;
width: 40%;
margin-bottom: 3vh;
}
#navCont {
position: relative;
top: 0;
}
#sqlogo {
opacity: .75;
width: 3em;
animation: pulse 1.8s cubic-bezier(.28, 0, .55, 1) 1s infinite alternate;
}
#keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.25);
}
}
#sqlogo:hover {
opacity: 1;
}
#sqlogo.freeze {
animation-play-state: paused;
}
#navCont>.btn {
opacity: .75;
visibility: hidden;
height: 1.5em;
position: absolute;
}
#navCont>.vis {
visibility: visible;
}
#navCont>.btn:hover {
opacity: 1;
}
#navCont > #btnWork{
left: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnAbout {
right: 4em;
top: 50%;
transform: translateY(-50%);
}
#navCont #btnContact {
top: 4em;
left: 50%;
transform: translateX(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="main">
<div id="title"> Title </div>
<div id="navCont">
<img id="sqlogo" src="http://drive.google.com/uc?export=view&id=1nybF_-lqMK9k0_X8EfgU8tKbiIzM459U" />
<img id="btnWork" class="btn" src="http://drive.google.com/uc?export=view&id=1o2pds3XK3Wh78pQPfC5cgsqWRHEIHy-Q" />
<img id="btnAbout" class="btn" src="http://drive.google.com/uc?export=view&id=1XGf88jotbT8n4NmBPc979gI1oYbhjgXb" />
<img id="btnContact" class="btn" src="http://drive.google.com/uc?export=view&id=1EjimLtnyIZRsfPbX3yc2wJ_s1Qxpwj45" / />
</div>
</div>
</div>
</body>
I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.
http://www.samnorris.net/portfolio-ss/
The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.
is my CSS incorrect, or something else...?
Here is the Codepen which shows the animation that should be displaying:
http://codepen.io/devilishalchemist/pen/emOVYQ
HTML:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS from my page:
/* ==========================================================================
PAGE LOADER
========================================================================== */
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
#windowloader {
&:after {
content: '';
display: block;
position: absolute;
z-index: 999999;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
animation: loader 1.2s infinite ease-in-out;
span {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-color: #EE4040;
animation: loaderBlock 1.2s infinite ease-in-out both;
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(3) {
bottom: 0;
left: 0;
animation: loaderBlockInverse 1.2s infinite ease-in-out both;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
/*LOAD FINISH*/
.loaded {
top: -100%;
}
}
}
#keyframes loader {
0%, 10%, 100% {
width: 80px;
height: 80px;
}
65% {
width: 150px;
height: 150px;
}
}
#keyframes loaderBlock {
0%, 30% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(90deg);
}
}
#keyframes loaderBlockInverse {
0%, 20% {
transform: rotate(0);
}
55% {
background-color: #F37272;
}
100% {
transform: rotate(-90deg);
}
}
FWIW, I have also tried:
#windowloader:after { }
Javascript:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});
Bah, nevermind - I just put the animation in a separate div inside the #windowloader div which probably works well enough I guess..
I am trying to learn a bit of Javascript/JQuery for school and got stuck on something I don't quite understand.
Everything in my function "works" as I wanted it to, but it feels odd that I have to list each of my selectors on a different line in order to remove all classes from each.
I've tried .merge and .add as suggestions i read on other posts, but I couldn't make it work (possibly not implementing it right) and I was hoping someone can show me how to do it and maybe explain why something like this doesn't work:
$(menuWrapper, menuTrigger, menuIcon, contentWrapper).removeClass();
This is my entire function, along with it working(just desktop css) on jsFiddle
// JavaScript Document
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if(menuWrapper.width() > 199){//if nav expanded
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed");//collapse the emenu
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");//collapse the content pane
}
else{//if screen is Mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-collapsed-m");//expand menu for desktop
menuTrigger.addClass("menu-trigger-wrapper-d-closed");//swing the trigger
menuIcon.addClass("open-d");
contentWrapper.addClass("closed-d");
}
}
else{//if NAV is collapsed
if($( document ).width() > 480){//if screen is not mobile
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded");//expand menu
contentWrapper.addClass("open-m");//expand the content pane
}
else{//if window screen is MOBILE
menuWrapper.removeClass();
menuTrigger.removeClass();
menuIcon.removeClass();
contentWrapper.removeClass();
menuWrapper.addClass("menu-expanded-m");//expand the menu
menuTrigger.addClass("menu-trigger-wrapper-m-open");//swing the trigger
menuIcon.addClass("open-m");
contentWrapper.addClass("open-d");//expand the content pane
}
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
https://jsfiddle.net/o5ogex6q/1/
Thanks in advance!
You could use something like this
$('#menu-wrapper, #menu-icon, #menu-trigger-wrapper, #custom-wrapper').removeClass();
EDIT
You can keep your variables and use following syntax object.selector to get the ID value. The only "messy" thing are the string commas.
$(menuWrapper.selector+","+ menuTrigger.selector+","+menuIcon.selector+","+ contentWrapper.selector).removeClass();
This is riding the line of a duplicate question to: How to combine two jQuery results
One slight difference is you'd have to pass each collection individually, eg:
var allMenuObjects = menuWrapper.add(menuIcon).add(menuTrigger).add(contentWrapper);
Hopefully this helps and I appreciate your efforts in understanding how to use jQuery efficiently. (eg without engaging the selector engine repeatedly)
Try the below code,
You can use toggleClass
Find more information about toggleClass
function toggleNavSettings(swipeDirection) {
menuWrapper = $("#menu-wrapper");
menuIcon = $('#menu-icon');
menuTrigger = $("#menu-trigger-wrapper");
contentWrapper = $("#custom-wrapper");
if ($(document).width() > 480) { //if screen is not mobile
menuWrapper.toggleClass("menu-collapsed");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
} else { //if screen is Mobile
menuWrapper.toggleClass("menu-collapsed-m");
menuTrigger.toggleClass("menu-trigger-wrapper-d-closed");
menuIcon.toggleClass("open-d");
contentWrapper.toggleClass("closed-d");
}
}
$(document).ready(function() {
var menuTrigger = $("#menu-trigger-wrapper");
menuTrigger.click(function() {
toggleNavSettings(null);
});
});
#charset"utf-8";
/* CSS Document */
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #121212;
color: #00c4e2;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.template-wrapper {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#custom-wrapper,
#custom-wrapper.open-d {
padding-left: 210px;
transition: all 0.4s;
}
#custom-wrapper.closed-d {
padding-left: 10px;
}
.content-page {
position: relative!important;
}
#menu-wrapper {
background: url(../images/menu_pattern_1.png);
background-repeat: repeat;
border-right: #00c4e2 10px solid;
position: fixed;
display: block;
top: 0;
left: 0;
width: 200px;
overflow-y: auto;
height: 100%;
transition: all 0.4s;
z-index: 1001;
}
.menu-expanded {
width: 200px;
}
.menu-collapsed {
width: 0px!important;
}
.menu-collapsed-m {
width: 0px!important;
}
.menu-wrapper.scroll {
width: 210px;
border-right: none;
}
#menu-trigger-wrapper {
transition: all 0.4s;
position: fixed;
display: block;
top: 0px;
left: 209px;
background: #00c4e2;
width: 48px;
height: 48px;
color: #fff;
cursor: pointer;
z-index: 1002;
}
.menu-trigger-wrapper-d-closed {
left: 9px!important;
}
.menu-trigger {
width: 100%;
height: 100%;
position: relative;
}
/*MENU ANIMATIONS*/
/* Icon 1 */
#menu-icon {
width: 86%;
height: 100%;
position: relative;
margin: 10px 0px 0px 1px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#menu-icon span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: #fff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#menu-icon span:nth-child(1) {
top: 0px;
}
#menu-icon span:nth-child(1),
#menu-icon.open-d span:nth-child(1) {
top: 12px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#menu-icon span:nth-child(2) {
opacity: 0;
top: 12px;
}
#menu-icon.open-d span:nth-child(1) {
opacity: 100;
}
#menu-icon span:nth-child(3),
#menu-icon.open-d span:nth-child(3),
#menu-icon.open-m span:nth-child(3) {
top: 12px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menu-icon.open-d span:nth-child(1) {
top: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
#menu-icon.open-d span:nth-child(2) {
top: 12px;
opacity: 100;
}
#menu-icon.open-d span:nth-child(3) {
top: 24px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(-0deg);
-o-transform: rotate(-0deg);
transform: rotate(-0deg);
}
.content-page {
margin-left: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu-trigger-wrapper">
<div id="menu-icon"> <span></span>
<span></span>
<span></span>
</div>
</div>
<div id="menu-wrapper" data-mcs-theme="inset">
<div class="menu-container"> Link 1
<br> Link 2
<br> Link 3
<br>
</div>
</div>
<div id="custom-wrapper">blah blah</div>
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>