Develop Reference

Mixitup 3 animation overshooting when elements moves a row up

When you click on the web filter, one of the items that is on the second row moves up to the first row. The animation that does this overshoots the movement and moves it way heigher than needed before comming back down in the correct possition. Im using mixitup v3.3.1. I've tried changing the animation style and reverting to an older version but neither seems to have an effect on it. Does anyone know how to fix this?
Here is a live example of my issue.
html
<!--==================== PORTFOLIO ====================-->
<section class="portfolio section container" id="portfolio">
<h2 class="section__title">Portfolio</h2>
<span class="section__subtitle">Some of my work</span>
<div class="portfolio__nav">
<span class="portfolio__item active-portfolio" data-filter="all">All</span>
<span class="portfolio__item" data-filter=".web">Web</span>
<span class="portfolio__item" data-filter=".app">App</span>
<span class="portfolio__item" data-filter=".other">Other</span>
</div>
<div class="portfolio__container grid">
<div class="portfolio__content mix web">
<!-- Picture needs to be 170:113 aspect ratio -->
<img src="assets/img/homeworktodo.png" alt="Screenshot of a todo website for tracking homework" class="portfolio__img">
<div class="portfolio__data">
<span class="portfolio__subtitle">PHP</span>
<h2 class="portfolio__title">HomeworkTODO</h2>
<div class="portfolio__buttons">
<a href="" class="button button--flex button--small " target="_blank">
<i class="uil uil-github portfolio__icon"></i>
</a>
<a href="" class="button button--flex button--small portfolio__button" target="_blank">
Demo
<i class="uil uil-arrow-right button__icon"></i>
</a>
</div>
</div>
</div>
<div class="portfolio__content mix app">
<!-- Picture needs to be 170:113 aspect ratio -->
<img src="assets/img/flutterapp.png" alt="Banner with a screenshot of an TTS app called voicebox" class="portfolio__img">
<div class="portfolio__data">
<span class="portfolio__subtitle">Flutter</span>
<h2 class="portfolio__title">VoiceboxTTS</h2>
<div class="portfolio__buttons">
<a href=" class="button button--flex button--small " target="_blank">
<i class="uil uil-github portfolio__icon"></i>
</a>
<a href="" class="button button--flex button--small portfolio__button" target="_blank">
Demo
<i class="uil uil-arrow-right button__icon"></i>
</a>
</div>
</div>
</div>
<div class="portfolio__content mix web">
<!-- Picture needs to be 170:113 aspect ratio -->
<img src="assets/img/pizzabakingvr.png" alt="Screenshot of a VR website through which you learn how to bake a pizza" class="portfolio__img">
<div class="portfolio__data">
<span class="portfolio__subtitle">A-Frame</span>
<h2 class="portfolio__title">VR Pizza Baking</h2>
<div class="portfolio__buttons">
<a href="" class="button button--flex button--small " target="_blank">
<i class="uil uil-github portfolio__icon"></i>
</a>
<a href="" class="button button--flex button--small portfolio__button" target="_blank">
Demo
<i class="uil uil-arrow-right button__icon"></i>
</a>
</div>
</div>
</div>
<div class="portfolio__content mix app">
<!-- Picture needs to be 170:113 aspect ratio -->
<img src="assets/img/moodmatch.png" alt="Banner with a screenshot of an app called MoodMatch" class="portfolio__img">
<div class="portfolio__data">
<span class="portfolio__subtitle">Flutter</span>
<h2 class="portfolio__title">MoodMatch</h2>
<div class="portfolio__buttons">
<a href="" class="button button--flex button--small " target="_blank">
<i class="uil uil-github portfolio__icon"></i>
</a>
<a href="" class="button button--flex button--small portfolio__button" target="_blank">
Demo
<i class="uil uil-arrow-right button__icon"></i>
</a>
</div>
</div>
</div>
<div class="portfolio__content mix web">
<!-- Picture needs to be 170:113 aspect ratio -->
<img src="assets/img/moodmatchapi.png" alt="Screenshot of the readme.md of the moodmatch api github repository" class="portfolio__img">
<div class="portfolio__data">
<span class="portfolio__subtitle">PHP</span>
<h2 class="portfolio__title">MoodMatch API</h2>
<div class="portfolio__buttons">
<a href="" class="button button--flex button--small " target="_blank">
<i class="uil uil-github portfolio__icon"></i>
</a>
</div>
</div>
</div>
<div class="portfolio__content mix other">
<!-- Picture needs to be 170:113 aspect ratio -->
<img src="assets/img/flappybeans.png" alt="Screenshot of the readme.md of the moodmatch api github repository" class="portfolio__img">
<div class="portfolio__data">
<span class="portfolio__subtitle">Python</span>
<h2 class="portfolio__title">Flappy Beans</h2>
<div class="portfolio__buttons">
<a href="" class="button button--flex button--small " target="_blank">
<i class="uil uil-github portfolio__icon"></i>
</a>
<a href="" class="button button--flex button--small portfolio__button" target="_blank">
Demo
<i class="uil uil-arrow-right button__icon"></i>
</a>
</div>
</div>
</div>
</div>
</section>
css
.portfolio__nav {
text-align: center;
margin-bottom: var(--mb-3);
}
.portfolio__item {
margin: 0 var(--mb-1);
cursor: pointer;
}
.portfolio__content {
background-color: var(--card-color);
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 4px 6px var(--card-shadow-color);
}
.portfolio__img {
width: 100%;
transition: 0.4s;
}
.portfolio__data {
padding: 1.5rem;
}
.portfolio__subtitle {
font-size: var(--small-font-size);
}
.portfolio__title {
font-size: var(--h3-font-size);
color: var(--title-color);
margin: var(--mb-1) 0;
}
.portfolio__content:hover {
box-shadow: 0 6px 8px var(--card-hover-shadow-color);
}
.portfolio__content:hover .portfolio__img {
transform: scale(1.02);
}
.portfolio__icon {
font-size: 1.25rem;
transition: 0.3s;
}
/* .portfolio__container {
overflow: initial;
}
.portfolio__content {
padding: 0 1.5rem;
}
.portfolio__img {
width: 265px;
border-radius: 0.5rem;
justify-self: center;
}
.portfolio__title {
font-size: var(--h3-font-size);
margin-bottom: var(--mb-0-5);
}
.portfolio__description {
margin-bottom: var(--mb-0-75);
}
*/
.portfolio__button:hover .button__icon {
transform: translateX(0.25rem);
}
.portfolio__buttons {
display: flex;
justify-content: flex-start;
gap: 1.5rem;
}
/* Active menu portfolio */
.active-portfolio {
color: var(--first-color);
font-weight: var(--font-semi-bold);
}
js
let swiperCertificates = new Swiper('.certificates__container', {
loop: true,
grabCursor: true,
spaceBetween: 48,
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true,
},
breakpoints: {
568: {
slidesPerView: 2,
},
1230: {
slidesPerView: 3,
}
}
});

How to make bootstrap 5 carousel draggable

I'm trying to make a boostrap 5 carousel draggable using drag and drop API. I have a problem when the carousel is dragged into another position where it can be dropped, it will lose all css settings that are in my vue component css and I will not be able to moove it again. How I can fix this and make the carousel and it's content draggable?
COMPONNENT HTML
<div class="row widget-area position-absolute m-0">
<div class="col-3 pt-2 pb-2 dropzone" #drop.prevent="onDrop($event)" #dragover.prevent #dragenter.prevent="onDragenter($event)" #dragleave="onDragleave($event)">
<div id="newsCarousel" class="carousel slide position-absolute" data-ride="carousel" draggable="true" #dragstart="startDrag($event)">
<!-- carousel inner -->
<div class="carousel-inner" draggable="true">
<div class="carousel-item card draggable-el position-absolute" :class="{ 'active': index === 0 }" :id="index" v-for="( news, index ) in newsfeed.articles" :key="index" draggable="true">
<img class="card-img-top" :src="news.image" :id="index" draggable="true" #dragstart="startDrag($event)">
<div class="card-body p-2">
<a class="text-decoration-none text-body" :href="news.source.url">
<small class="d-block text-muted">{{ news.source.name }}</small>
</a>
<a class="h6 text-decoration-none text-body card-title stretched-link" :href="news.url">{{ news.title }}</a>
</div>
</div>
</div>
<!-- carousel controls -->
<a class="carousel-control-prev" href="#newsCarousel" role="button" data-slide="prev" draggable="true">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#newsCarousel" role="button" data-slide="next" draggable="true">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="col-3 pt-2 pb-2 dropzone"
#drop.prevent="onDrop($event)"
#dragover.prevent
#dragenter.prevent="onDragenter($event)"
#dragleave="onDragleave($event)">
</div>
<div class="col-3 pt-2 pb-2 dropzone"
#drop.prevent="onDrop($event)"
#dragover.prevent
#dragenter.prevent="onDragenter($event)"
#dragleave="onDragleave($event)">
</div>
<div class="col-3 pt-2 pb-2 dropzone"
#drop.prevent="onDrop($event)"
#dragover.prevent
#dragenter.prevent="onDragenter($event)"
#dragleave="onDragleave($event)">
</div>
</div>
JS CODE
//drag n drop
startDrag(e) {
let ids = [];
e.dataTransfer.dropEffect = 'move';
e.dataTransfer.effectAllowed = 'move';
const items = document.getElementsByClassName('draggable-el');
items.forEach( (el) => {
el.classList.add('dragging');
ids.push(el.id);
});
e.dataTransfer.setData('text/plain', JSON.stringify(ids));
},
onDragenter(e) {
e.target.classList.add('drop');
},
onDragleave(e) {
e.target.classList.remove('drop');
},
onDrop(e) {
let ids = JSON.parse(e.dataTransfer.getData('text/plain'));
ids.forEach( (id) => {
const item = document.getElementById(id);
item.classList.remove('dragging');
e.target.classList.remove('drop');
e.target.appendChild(item);
});
// return false;
}
SCOPED CSS
.widget-area {
width: 100%;
height: 350px;
top: 8em;
z-index: 200;
.dropzone {
&.drop{
border: rgba(255,255,255,0.3) dotted 1px;
.draggable-el {
pointer-events: none;
}
}
}
#newsCarousel {
// width: 18.5rem;
// height: 330px;
.carousel-inner {
width: 18.5rem;
height: 330px;
z-index: 300;
.draggable-el {
height: 330px;
width: 18.5rem;
transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
&:active {
cursor: grabbing;
}
&.dragging {
opacity: .5;
transform: scale(.8);
}
}
}
.carousel-control-prev, .carousel-control-next {
z-index: 300;
top: -6em;
}
}
}

How to change icon for a custom accordion?

We created a custom accordion library that will toggle the .content element based on what is clicked similar to jQuery accordion. Next to the .header element we are displaying a fontawesome plus icon. I am running into issues where the content will hide and show, but the icon will not switch.
How can i get the content element and icons to switch?
Current issue:
Desired output:
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
var grandParents = hdr.parent().parent();
grandParents.find('.item.active').removeClass('active');
grandParents.find('.content').stop().slideUp().removeClass('active');
hdr.closest('.item').find('.content').stop().slideToggle();
hdr.parent().toggleClass('active');
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>

I have updated your js code, please check. The general concept of my update is, in every click, the icon is removed and replaced with a new but different one (from plus to minus and vice versa).
The problem on this is that the use of fontawesome icons. But anyways, take a look on my code.
Here's the full working code. The only update I have is the js part.
$(function() {
$('.header').on('click', function() {
var hdr = $(this);
hdr.siblings('.content').slideToggle();
hdr.parent().toggleClass('active');
hdr.parent().siblings().find('.content').slideUp();
hdr.parent().siblings().removeClass('active');
if(hdr.parent().hasClass('active')) {
hdr.parent().find('svg').remove();
hdr.parent().siblings().find('svg').remove();
hdr.prepend('<i class="fas fa-minus"></i>');
hdr.parent().siblings().find('.header').prepend('<i class="fas fa-plus"></i>');
} else {
hdr.parent().find('svg').remove();
hdr.prepend('<i class="fas fa-plus"></i>');
}
});
});
.content {
display: none;
}
.item.active > .content {
display: block;
}
.item.active > .header {
color: white;
background-color: black;
}
.header {
padding: 16px;
margin: 8px;
background-color: lightgrey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
<div class="accordion">
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>First link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>second link</span>
</h3>
<div class='content'> SOME CONTENT HERE </div>
</div>
<div class="item">
<h3 class="header">
<i class="fas fa-plus"></i>
<span>third link</span>
</h3>
<div class='content'> Some more content </div>
</div>
</div>

We had same kind of requirement, where we had to replace the + icon of each accordion item with dynamic icon specific to the accordion content, like
1st Accordion - a.png
2nd accordion - b.png and so on.
I did it by adding an image to the Accordion Item page content template and assign it to the cloned accordion rendering.

Animation effect for the images

Is there any way possible to apply animation effect to images in my about section,here is the code:
<div id="about" class="row section bgimg3">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"><span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
Here is my link to code pen: https://codepen.io/saisree/pen/WjVjMW
What i want to do is there are three images in my about section,i don't want to display all the three images at a time,i want to appear one by one when i click on about section in header!I want to use animation for this!

I recommend this library https://github.com/michalsnik/aos . Is very simple the implementation and you can get delay for any class.
Example: https://michalsnik.github.io/aos/

there are different ways to implement it, since you are using jQuery, you can try fade in effects, like the example https://codepen.io/RACCH/pen/bRbpwM
adding this event to your about tab, and hiding the circled images
$(".img-circle").hide();
var iteration=1;
$(".1").click(function() {
$('html,body').animate({
scrollTop: $("#about").offset().top},
'slow');
$(".img-circle").hide();
$('#'+iteration+'-img-circle').fadeIn(2000);
if(iteration==3) iteration=1;
else iteration++;
});

Add the following jQuery:
$(".1").click(function() {
$(".col-sm-4.pull-right img:nth-child(1)").hide();
$(".col-sm-4.pull-right img:nth-child(2)").hide();
$(".col-sm-4.pull-right img:nth-child(3)").hide();
$(".col-sm-4.pull-right img:nth-child(1)").fadeIn(2000);
$(".col-sm-4.pull-right img:nth-child(2)").fadeIn(4000);
$(".col-sm-4.pull-right img:nth-child(3)").fadeIn(6000);
});

Add below code.
$('.img-circle').mouseenter(function(){
$(this).animate({
'border-radius': '40%'},
'slow',
function(){
$(this).animate({
'border-radius': '50%'},
'fast');
});
})
This working code will help you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript">
$().ready(function () {
$(".0").click(function () {
$('html,body').animate({
scrollTop: $("#home").offset().top
},
'slow');
});
$(".1").click(function () {
$('html,body').animate({
scrollTop: $("#about").offset().top
},
'slow');
});
$('.img-circle').mouseenter(function () {
$(this).animate({
'border-radius': '40%'
},
'slow',
function () {
$(this).animate({
'border-radius': '50%'
},
'fast');
});
})
$(".2").click(function () {
$('html,body').animate({
scrollTop: $("#family").offset().top
},
'slow');
});
$(".3").click(function () {
$('html,body').animate({
scrollTop: $("#blog").offset().top
},
'slow');
});
$(".4").click(function () {
$('html,body').animate({
scrollTop: $("#testimonial").offset().top
},
'slow');
});
$(".5").click(function () {
$('html,body').animate({
scrollTop: $("#spec").offset().top
},
'slow');
});
$(".6").click(function () {
$('html,body').animate({
scrollTop: $("#contact").offset().top
},
'slow');
});
$(".overlay + img").each(function () {
var w = $(this).css("width");
$(this).prev(".overlay").css("width", w);
});
});
</script>
<style>
#blog a {
color: Bisque;
text-decoration: underline;
}
.bgimg {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A");
background-position: center;
background-size: cover;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}
.jumbotron {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRygQnWzs3GfysYKie99aTXhbYvGrS7gxQzTAFFu9DN4azC_nwz");
background-position: center;
background-size: cover;
}
h3 {
text-color: black;
}
#family h2 {
color: black;
text-decoration: none;
}
#Nav h3 {
color: black;
text-decoration: none;
}
.text {
white-space: nowrap;
color: black;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.overlay {
position: absolute;
bottom: 0;
background-color: rgba(255, 255, 255, 0.48);
/* background-color: white; */
overflow: hidden;
height: 0;
transition: .5s ease;
}
.ovparent:hover .overlay {
height: 100%;
}
.ovparent {
position: relative;
}
#over {
text-align: center;
}
.bgimg1 {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJRGtOjps8wjohBoCFu3oDrwu4O6RakP9KgUbbBHPdoFb_MuUs");
background-position: center;
background-size: cover;
}
.bgimg2 {
background-image: url("data:image/jpeg;base64,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");
background-position: center;
background-size: cover;
}
.well.first {
background-color: Bisque;
}
.well.second {
background-color: LightGoldenRodYellow;
}
.well.third {
background-color: Thistle;
}
.well.fourth {
background-color: Pink;
}
</style>
</head>
<body>
<div id="Nav" class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="https://codepen.io/saisree/full/WjVjMW/">Anand Reddy</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" ">
<li class="active"><a class="0" href="#home">Home</a></li>
<li><a class="1" href="#about">About</a></li>
<li><a class="2" href="#family" >Meet the family</a></li>
<li>Blog</li>
<li >Testimonials</li>
<li >Specialization</li>
<li ><a class="6" href="#contact">contact</a></li>
</ul>
</div>
<div class="jumbotron myjumbotron ">
<section class="bgimg" id="home">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h1 style="color:white;" class="text-center">ANAND REDDY</h1>
<h3 style="color:white;" class="text-center">A WONDERFUL SERENITY HAS TAKEN POSSESSION OF MY ENTIRE SOUL, LIKE THESE
SWEET MORNINGS OF SPRING WHICH I ENJOY WITH MY WHOLE HEART
</h3>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<hr style="border: 1px solid black" />
<div id="about" class="row section">
<div class="col-sm-8">
<h2 style="color:black;">Want to Know More About me?</h2>
<h3>BIOGRAPHY</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Born:1961,dharmavaram</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>spouse:swarna latha</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>parents:Nagi reddy(father),sarada(mother)</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>education:B.A,L.L.B,P.H.D</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>children:Divya,Tejasvi,Saisree</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Achievements:Great father,Public Prosecutor</h4>
<h3>Hobbies</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Partying with friends</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Playing Cricket</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Reading Books</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Travelling</h4>
<h3>Goals yet to achieve</h3>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>World tour with family</h4>
<h4 style="color:ash"> <span class="glyphicon glyphicon-share-alt"></span>Buy an AUDI</h4>
</div>
<div class="col-sm-4 pull-right">
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
<img style="height:500%;"class="img-circle" src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFp8CA_CfnnMbFZ2UW1cDm_zfDcQtuPitWa0x8LNRKFV3kH4A "/>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="family" class="gray-bg">
<section class="container section team-3col ">
<div class="row">
<header class="text-center sec-heading">
<h2>Meet the Family</h2>
<span class="subheading">We are the ones!</span>
</header>
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
<br>
<div class="row">
<div class="col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
<div class="a col-lg-4 col-md-6 mb-sm-50 ovparent">
<div class="overlay">
<div class="text">Hello World</div>
</div>
<img style="height:100%;width:100%; " class="img-responsive " src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsl7JTXK1z2ZomjuzpU49t7TlSMdYcioHrQLvHjmuM_3r5oc36 " />
</div>
</div>
</section>
</div>
<hr style="border: 1px solid black" />
<div id="blog" class="section bgimg1">
<p> </p>
<h1 style="color:Bisque;" class="text-center">Welcome to my Blog</h1>
<h2 style="color:Bisque;" class="text-center">"Man must explore, and this is exploration at its greatest"</br>
Problems look mighty small from 150 miles up
</h2>
<p> </p>
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2 >
Know about my backgound
<h2>
</div>
<div class="col-md-5 col-md-offset-1"> <h2> Know about my specialization</h2></div>
</div>
<div class="row">
<div class="col-md-5 col-md-offset-1"><h2> Contact My Firm</h2></div>
<div class="col-md-5 col-md-offset-1">
<h2 class="text-center"> Visit my portfolio</h2></div>
</div>
</div>
<hr style="border: 1px solid black" />
<div id="testimonial" class="section">
<div class="section-header">
<h2 style="color:white"; class="text-center">Testimonials</h2>
<h4 style="color:white"; class="text-center">
We have worked with hundreds of clients. Check what our awesome happy clients saying about us.
</h4>
</div>
<p> </p>
<div class="row">
<div class="well first col-md-3 ">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span>
</div>
<div class="well second col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well third col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
<div class="well fourth col-md-3">Amazing experience one can ever have!He walked us through the process and made it easy. he answered our questions, no matter how trivial (even on the weekend!), and took time out of her day to come to our home, rather than making us come to him!~<span>#abcdefg</span></div>
</div> </div>
<hr style="border: 1px solid black" />
<div id="spec" class="section bgimg2">
<p> </p>
<h2 style="color:black" class="text-center">So, what will I actually be doing?</h2>
<h3 style="color:SlateGrey" class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Attending court hearings (and doing the preparation beforehand)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Drawing up contracts and other legal documents </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Negotiating (not all cases will end up in court)</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Explaining the law and giving general legal advice </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span> Settling disputes and supervising any agreements </h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Researching and gathering evidence</h3>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Analysing legal documents</h2>
<h3 style="color:SlateGrey"class="text-center"> <span class="glyphicon glyphicon-hand-right"></span>Supervising legal assistants.</h3>
<p> </p>
</div>
<hr style="border: 1px solid black" />
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading" style="color:black">Let's Get In Touch!</h2>
<hr class="primary">
<h3 style="color:black">Ready to discuss your next case with me? That's great! Give me a call or send an email and I will get back to you as soon as possible!</h3>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<h3><span class="glyphicon glyphicon-earphone">986-60-32199</span></h3>
</div>
<div class="col-lg-4 text-center">
<h3><span class="glyphicon glyphicon-envelope">anandreddyv.25#gmail.com</span></h3>
</div>
</div>
</div>
</section>
<hr style="border: 1px solid black " />
</div>
</div>
</div>
<footer class="text-center ">
<p>Copyrights © <span class="text-primary">anand reddy vennapusa.</span> All Right Reserved.</p>
<p>Developed By : saisree vennapusa</p>
</footer>
</body>
</html>

How to make an element active on hover, and remain active when im hovering over another specific div

I have a menu bar with categories,
when I hover a certain category a large drop down appear under it with subcategories.
I have already created it, you can see it here http://www.bootply.com/9Qz14HIz8R
Now when I hover the category its background change to gray,
and when I move the cursor down to the subcategory drop down the grey background on the category is gone.
I want to find a way to make the category background gray when hovered,
and then when I move the cursor to the subcategory drop down,
i want the category to remain in gray background.
And when i move the cursor outside the subcategories drop down box then the category background will be gone.
I want to know what is the best way to achieve this.
I'm thinking that using js or jquery we can make the category active on hover and keep it active once cursor is on the subcategories drop down but make it inactive when the cursor moves out of the drop down box.
Any idea on how to solve this or if you suggest a different approach to achieve it.

Add class name .active
and on hover add style name to .services-shortcut
<style>
.services-shortcut {
-webkit-transition: background-color 500ms linear 200ms;
-o-transition: background-color 500ms linear 200ms;
transition: background-color 500ms linear 200ms;
}
.services-shortcut:hover,
.services-shortcut.active {
color: #555;
background: none repeat scroll 0% 0% #ddd;
}
</style>
<script>
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
</script>
if you want to use .on() method do this:
jQuery('div.dropdown').on(
'mouseenter', function () {
jQuery(this).find('.services-shortcut').addClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
},
'mouseleave', function () {
jQuery(this).find('.services-shortcut').removeClass('active');
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
}
);

try this:
CSS:
.category-overlay{
width:1190px;
height:90px;
background:#ddd;
margin-top:30px;
}
.services-shortcut {
color: #555;
background: none repeat scroll 0% 0% #ddd;
}
HTML:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1></h1> <div class="category-box">
<div class="dropdown" class="">
<a href="HTTP://GOOGLE.COM" target="_blank" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-bullhorn fa-3x"></i>
<h5>CATEGORY 1</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 1
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-car fa-3x"></i>
<h5>CATEGORY 2</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 2
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-file-text fa-3x"></i>
<h5>CATEGORY 3</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 3
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-home fa-3x" style="margin-bottom: -20px; margin-top: -11px; font-size: 4em;"></i>
<h5>CATEGORY 4</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 4
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-cogs fa-3x"></i>
<h5>CATEGORY 5</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 5
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-users fa-3x"></i>
<h5>CATEGORY 6</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 6
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category>
<i class="fa fa-heart fa-3x"></i>
<h5>CATEGORY 7</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 7
</div>
</div>
<div class="dropdown">
<a href="HTTP://GOOGLE.COM" style="width: 12.5%; float: left;" data-toggle="dropdown">
<div data-category<h1></h1>>
<i class="fa fa-briefcase fa-3x"></i>
<h5>CATEGORY 8</h5>
</div>
</a>
<div class="dropdown-menu category-overlay">
Action 8
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY:
jQuery('div.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('div[data-category]').mouseenter(function(){
$(this).addClass('services-shortcut');
})
$('div[class=dropdown]').mouseleave(function(){
$(this).find('div[data-category]').removeClass('services-shortcut');
});