We Keep Coding

How to scale out.pop up image when i hover?

I have an image that i want to scale out when it has hovered.
code is written with react and css. What am i doing wrong?
Here is my gist which include style sheet as well as js code
react/js code
import React from 'react';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import ScreenHeading from '../../utilities/ScreenHeading/ScreenHeading';
import ScrollService from '../../utilities/ScrollService';
import Animations from '../../utilities/Animations';
import './Certificates.css';
import clf from '../../img/Certs/clf.png';
import shape from '../../img/Certs/shape-bg.png';
export default function Certificate(props) {
let fadeInScreenHandler = (screen) => {
if (screen.fadeInScreen !== props.id) return;
Animations.animations.fadeInScreen(props.id);
};
const fadeInSubscription =
ScrollService.currentScreenFadeIn.subscribe(fadeInScreenHandler);
const options = {
loop: true,
margin: 0,
nav: true,
animateIn: 'bounceInRight',
animateOut: 'bounceOutRight',
dots: true,
autoplay: true,
smartSpeed: 1000,
responsive: {
0: {
items: 1,
},
768: {
items: 1,
},
1000: {
items: 3,
},
},
};
return (
<div>
<ScreenHeading
title={'Certifications'}
subHeading={'I love validating my skills'}
/>
<section className="testimonial-section fade-in" id={props.id || ''}>
<div className="container">
<div className="row">
<OwlCarousel
className="owl-carousel"
id="testimonial-carousel"
{...options}
>
<div className="col-lg-12">
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
Learning about core aws services, shared responsibility
model and billing and pricing concepts was an eyeopener
for me as a cloud engineer.
<i className="fa fa-quote-right" />
</p>
</div>
<div className="client-info">
<img src={clf} alt="no internet connection"></img>
<h5>AWS CLF-01</h5>
<p></p>
</div>
</div>
</div>
<div className="col-lg-12">
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
Coming Soon 💯
<i className="fa fa-quote-right" />
</p>
</div>
<div className="client-info">
{/* <img src={mike} alt="no internet connection"></img> */}
<h5>AWS SAA</h5>
</div>
</div>
</div>
<div className="col-lg-12">
<div className="testi-item">
<div className="testi-comment">
<p>
<i className="fa fa-quote-left" />
Coming Soon 💯
<i className="fa fa-quote-right" />
</p>
</div>
<div className="client-info">
{/* <img src={clf} alt="no internet connection"></img> */}
<h5>AWS DVA</h5>
</div>
</div>
</div>
</OwlCarousel>
</div>
</div>
</section>
<div className="footer-image">
<img src={shape} alt="Phot0 not responding" />
</div>
</div>
);
}
css
.testimonial-section {
padding: 80px 0 80px;
background-image: url('../../../src/assets/Certificates/bg-1.jpg');
background-position: center;
background-attachment: fixed;
position: relative;
z-index: -1;
}
.testimonial-section::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.85;
background-color: #1f2235;
}
.footer-image {
width: 100%;
height: 100%;
max-width: 1920px;
overflow: hidden;
display: flex;
justify-content: center;
margin-top: -110px;
}
.footer-image img {
max-width: 100%;
height: 130px;
}
.testimonial-section .testi-item {
background-color: white;
padding: 30px;
border-radius: 50px 50px 50px 0px;
}
.testimonial-section .testi-item p {
font-size: 16px;
line-height: 26px;
font-weight: 500;
margin: 0 0 10px;
font-style: italic;
}
.testimonial-section .testi-item p .fa-quote-left {
margin-right: 5px;
color: tomato;
}
.testimonial-section .testi-item p .fa-quote-right {
margin-left: 5px;
color: tomato;
}
.testimonial-section .client-info {
position: relative;
padding-left: 80px;
padding-top: 5px;
min-height: 60px;
}
.testimonial-section .client-info img {
height: 70px;
width: 70px;
border: 2px solid transparent;
border-color: black;
left: 30px;
top: -4px;
border-radius: 50%;
position: relative;
}
.testimonial-section:hover .client-info img {
transform: scale3D(1.5, 1.5, 1.5);
}
.testimonial-section .client-info h5 {
font-size: 20px;
font-weight: 600;
line-height: 26px;
margin: 0 0 2px 10px;
position: absolute;
}

Try writing like this
.testimonial-section:hover .client-info img {
transform: scale3D(1.5,1.5,1.5);
}
or
.testimonial-section .client-info img:hover {
transform: scale3D(1.5,1.5,1.5);
}

In this case transform: scale(1.5); should work. This is a working example (not with your code)
.image-box {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid gray;
overflow: hidden;
}
.image-box img {
width: 100px;
height: 100px;
transition: 300ms;
}
.image-box img:hover {
transform: scale(1.5);
}
<div class="image-box">
<img src="https://static-cdn.jtvnw.net/emoticons/v2/25/default/dark/1.0" alt="">
</div>
With your HTML/CSS
.client-info img {
height: 70px;
width: 70px;
border: 2px solid transparent;
border-color: black;
left: 30px;
top: -4px;
border-radius: 50%;
position: relative;
}
.client-info h5 {
font-size: 20px;
font-weight: 600;
line-height: 26px;
margin: 0 0 2px 10px;
position: absolute;
}
.client-info:hover img {
transform: scale3D(1.5, 1.5, 1.5);
}
<div class="client-info">
<img src="https://static-cdn.jtvnw.net/emoticons/v2/25/default/dark/1.0" alt="no internet connection"></img>
<h5>AWS CLF-01</h5>
<p></p>
</div>

Ensure div parent wraps img child

I'm building a "resize image" feature for my app. However in setting it up, I am running into difficulties getting the draggable handles of the element to cleanly wrap around the image, like this:
With my code, it seems like the size of the div is based on thewindow and not the image.
This is my code so far, you can see it in action on Stackblitz here:
index.html
<figure class="figure mb-4 mt-2 text-center">
<app-resize-container>
<img
class="figure-img rounded"
src="https://picsum.photos/seed/picsum/600/600"
style="margin: 0px;"
/>
</app-resize-container>
<figcaption [style.marginTop.em]="1" class="figure-caption text-center">
Test
</figcaption>
</figure>
resize-container.component.html
<div class="resize-container">
<div class="resize-container-handler">
<div
*ngFor="let resizeCornerSetting of resizeCornerSettings; let i = index"
[ngClass]="resizeCornerSetting.class"
>
<div class="resize-corner-handle">
<div class="resize-element-size-container"></div>
</div>
</div>
<ng-content></ng-content>
</div>
</div>
resize-container.component.ts
import { Component, Input } from '#angular/core';
import { IResizeCornerSettings } from './course-content-element-item-resize-container';
#Component({
selector: 'app-course-content-element-item-resize-container',
templateUrl: './course-content-element-item-resize-container.component.html',
styleUrls: ['./course-content-element-item-resize-container.component.css'],
})
export class CourseContentElementItemResizeContainerComponent {
#Input() width: number | undefined | null;
resizeCornerSettings: IResizeCornerSettings[] = [
{
position: ['top', 'left'],
class: 'resize-corner-container resize-corner-top-left',
},
{
position: ['top', 'right'],
class: 'resize-corner-container resize-corner-top-right',
},
{
position: ['bottom', 'left'],
class: 'resize-corner-container resize-corner-bottom-left',
},
{
position: ['bottom', 'right'],
class: 'resize-corner-container resize-corner-bottom-right',
},
];
}
resize-container.component.css
.resize-container {
text-align: center;
border: 2px solid #335eea !important;
}
.resize-container-handler {
z-index: 3;
overflow: visible;
min-inline-size: max-content;
min-width: 30px;
min-height: 30px;
will-change: width, height, transform;
}
.resize-corner-container {
height: 30px;
width: 30px;
position: fixed;
pointer-events: auto;
display: flex;
}
.resize-corner-handle {
width: 12px;
height: 12px;
border-radius: 8px;
box-shadow: 0 0 5px 1px rgba(14, 19, 24, 0.15),
0 0 0 1px rgba(14, 19, 24, 0.2);
position: relative;
background: #fff;
display: flex;
margin: auto;
z-index: 1;
}
.resize-corner-top-right {
z-index: 1;
top: -15px;
right: -15px;
cursor: nesw-resize;
}
.resize-corner-top-left {
z-index: 1;
top: -15px;
left: -15px;
cursor: nwse-resize;
}
.resize-corner-bottom-right {
z-index: 1;
bottom: -15px;
right: -15px;
cursor: nwse-resize;
}
.resize-corner-bottom-left {
z-index: 1;
bottom: -15px;
left: -15px;
cursor: nesw-resize;
}

You are just missing display: inline-block; on parent divs .resize-container and .resize-container-handler. Just add display: inline-block and it will start working.
.resize-container {
text-align: center;
border: 2px solid #335eea !important;
display: inline-block; /*Added this */
}
.resize-container-handler {
z-index: 3;
overflow: visible;
min-inline-size: max-content;
min-width: 30px;
min-height: 30px;
will-change: width, height, transform;
display: inline-block; /*Added this */
}
See here

can't animate an image slider in jquery

I'm new to javascript/jquery, and I'm building an image slider. I can't seem to get the images to animate. I'm not sure what's wrong here.
What I've been trying to do is to get the active slide then slide the next sibling and animate it, but all I get in result is that the first image animate then it stops.
Here is the code: https://jsfiddle.net/6qntgg5z/
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=" > ">
<input type="button" name="next" id="prev" value=" < ">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>
CSS
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 2em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
Javascript
$(document).ready(function(){
setInterval(animateSlider(), 5000);
});
//configuration
var currentSlide=activeSlide();
var slides=$("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000,
function () {
$current.removeClass('active');
$current.css({opacity: 1.0});
});

try this fiddle (does what you need but has other flaws i think). in your html you used the '<' and '>' characters as your button text, this breaks the flow of the html so you should instead use character codes:
< becomes < and
> becomes > www.w3schools.com/html/html_entities.asp
also your js was missing a closing } and the jsfiddle was missing aa jquery library call (I wish jsfiddle would make it faster to integrate libraries). hope it helps.
$(document).ready(function(){
setInterval(function(){ animateSlider() }, 5000);
});
//configuration
var currentSlide = activeSlide();
var slides = $("#carousel .slides .slide");
//get active slide index
function activeSlide(){
var activeSlide=$("#carousel .slides .active").index();
return activeSlide;
}
function animateSlider() {
//remove active class from previous element and assign it to the current one then animate it using animate() function
var $current=slides.eq(activeSlide());
var $next= $(".slides img:first");
$next.addClass('active');
$current.animate({opacity: 0.0}, 1000, function () {
$current.removeClass('active');
$current.css({opacity: 1});
});
}
html,body {
height: 100%;
position: relative;
}
*{
box-sizing: border-box;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
header {
background: black;
height: 20px;
padding: 1.5em;
color: white;
}
#carousel {
position: relative;
margin: 0 auto;
width: 45%;
margin-top: 15px;
height: 100%;
}
.slide {
position: absolute;
max-width: 100%;
z-index: 0;
}
.sliderbuttons {
}
#prev,#next {
position: absolute;
background-color: rgba(255, 148, 41, 0.68);
box-shadow: 2px white;
border:none;
font-size: 1em;
color: white;
font-weight: bold;
/* font-family: 'Baloo Tamma', cursive;
*/ padding:10px;
top:15%;
width: 10%;
/*making the prev,next on top of content*/
z-index: 2;
}
#prev {
left:0;
}
#next {
right:0;
}
.active {
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<header>
header is here
</header>
<div id="carousel">
<div class="sliderbuttons">
<input type="button" name="next" id="next" value=">">
<input type="button" name="next" id="prev" value="<">
</div>
<div class="slides">
<img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" alt="image1" class="slide active">
<img src="http://www.mrwallpaper.com/wallpapers/green-Rice-1600x900.jpg" alt="image2" class="slide">
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg" alt="image3" class="slide">
</div>
</div>
</div>

Velocity.js - triggering animations

I'm currently trying to get rid of a bunch of CSS animations and replace with the Velocity.js (along the way building in new animations).
At present I have a grid Item:
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>
This is controlled through CSS to fade in the .overlay element. What I then want to do is for the h5 & h6 classes to slide up in.
I've written the following code:
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
But nothing seems to be happening. I'm quite new to Javascript so I'm presuming I've made a silly mistake somewhere along the line but can't work out what it is.
I've included a full snippet below and it can also be found here
$('.overlay').hover(function(){
$(this).find('.SlideIn').velocity("transition.slideUpIn", {stagger: 100, duration: 500});
});
#thumbnail-array {
width: 100%;
}
.gutter-sizer {
width: 0.03%;
}
.video-thumbnail {
position: relative;
background-color: #777;
overflow: hidden;
line-height: 0px;
margin: 0px;
}
.video {
position: absolute;
margin-top: none;
left: 0;
right: 0;
bottom: 0;
padding: 0;
width: 100%;
height: 100%;
z-index: 100;
display: none;
}
.overlay {
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 50;
}
.thumbnail-link {
display: table;
width: 100%;
height: 100%; /*important, forces to 100% height of parent*/
opacity:0;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .25s ease;
background: rgba(0, 0, 0, 0.5);
color: #FFFFFF;
text-decoration: none;
}
.title {
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
color: #FFFFFF;
font-family: helvetica;
width: 100%;
line-height: 0px;
}
.title-display {
display: block;
width: 100%;
}
.video-thumbnail:hover .thumbnail-link {
text-decoration: none;
opacity:1;
}
.imgspacer {
width: 100%;
max-width:100%;
}
.picturehelper {
display: inline-block;
}
.video-thumbnail:hover .video {
display: inline;
}
h5 {
display: inline-block;
width: 100%;
font-size: 2em;
margin: 0px;
padding: 0px;
line-height: normal;
}
h6 {
display: inline-block;
width: 100%;
font-size: 0.75em;
letter-spacing: 0.3em;
padding: 0px;
margin: 0px;
font-weight: 100;
line-height: normal;
}
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.ui.js"></script>
<script src="https://raw.githubusercontent.com/julianshapiro/velocity/master/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-thumbnail">
<img src="http://placehold.it/1280x720" class="imgspacer" alt="{$info['title']}" />
<div class="overlay">
<a href="http://bbc.co.uk" class="thumbnail-link">
<div class="title">
<div class="title-display">
<h5 class="SlideIn">Title One</h5>
<h6 class="SlideIn">Title Two</h6>
</div>
</div>
</a>
</div>
</div>

As mentioned by #AldoRomo88 and #jmcgriz there was an issue with the load order of the scripts on the page.
I fixed the issue by simply loading query first up (and hosting the scripts on my own server!)

Toggle Class while removing class from siblings

I have a map where I am toggling a class when you click on a dot/location that pops up a tooltip. The issue I'm running into is that when I click on another dot the other siblings tooltips are not going away. I tried to solve this by removing the class of the siblings on click, but when I do this the toggle stops working and I cannot click the dot again to get rid of the active tooltip.
I need the toggle on the currently active tooltip to still work but I also need the sibling tooltips to disappear as well.
I hope I explained that right. Here is a codepen: http://codepen.io/anon/pen/BzQrLV
$('.dot').click(function() {
$('div.toggle-active').removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Add .not($(this).next()) to your removeClass statement so you don't remove the active class from all the dots, just the dots not being clicked on.
$('.dot').click(function() {
$('div.toggle-active').not($(this).next()).removeClass('toggle-active');
$(this).next().toggleClass('toggle-active');
});
#map {
position: relative;
width: 100%;
max-width: 580px;
}
#map img {
max-width: 100%;
}
/** DOTS **/
.dot {
background-color: #fff;
border: 1px solid #fff;
border-radius: 50%;
cursor: pointer;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot:hover {
background-color: #00A24B;
}
.dot-oregon-greshman {
top: 15%;
left: 11%;
}
.dot-oregon-oregon-city {
top: 16.5%;
left: 11%;
}
/** TOOLTIPS **/
.tooltip::before {
content: "";
height: 0;
width: 0;
border-style: solid;
border-width: 12.5px 21.7px 12.5px 0;
border-color: transparent #01872B transparent transparent;
position: absolute;
top: 50%;
left: -6%;
transform: translateY(-50%);
}
.tooltip {
opacity: 0;
background-color: #01872B;
color: #fff;
padding: 10px 10px 10px 20px;
font-size: 12px;
width: 186px;
position: absolute;
line-height: 14px;
transition: all 300ms ease-in-out;
}
.tooltip.toggle-active {
opacity: 1;
}
.tooltip p {
margin: 3px 0;
}
.tooltip a {
color: #fff;
}
.tooltip a:hover {
color: #c3ecff;
text-decoration: none;
}
.tooltip strong {
color: #fff;
font-size: 14px;
}
.tooltip-oregon-greshman {
top: 10%;
left: 16%;
}
.tooltip-oregon-oregon-city {
top: 11.5%;
left: 17%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML
<div class="map-section">
<div class="map-container">
<div id="map">
<img src="http://openpathinvestments.com/wp-content/themes/boilerplate/images/map-blue.png" alt="">
<div class="locations">
<div class="dot dot-oregon-greshman"></div>
<div class="tooltip tooltip-oregon-greshman">
<strong>Stark Street Crossings</strong>
<p>Greshman, Oregon 97030</p>
<p>Property Profile | Website
</p>
</div>
<div class="dot dot-oregon-oregon-city"></div>
<div class="tooltip tooltip-oregon-oregon-city">
<strong>The Preserve</strong>
<p>Oregon City, Oregon 97045</p>
<p>Property Profile | Website
</p>
</div>
</div>
</div>
</div>
</div>

Updated to check whether the tooltip was already being displayed before displaying it.
$('.dot').click(function() {
var displayed = $(this).next().attr('class').match('toggle-active');
$('div.toggle-active').removeClass('toggle-active');
if(!displayed){
$(this).next().toggleClass('toggle-active');
}
});