Develop Reference

Mouseenter item card

Please help with the code! I need to hover the mouse over the button with the cart, it added a class and svg class, and the button with favorites, also added a class.
And Vice versa-hovering the mouse over your favorites, the button with the cart is hidden
$('.item-block__button-cart').mouseenter
function() {
$(this).addClass('item-block__button-cart--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
}
);
$('.item-block__button-cart').mouseleave
function() {
$(this).removeClass('item-block__button-cart--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");
}
);
$('.item-block__button-favorite').mouseenter
function() {
$(this).addClass('item-block__button-favorite--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
}
);
$('.item-block__button-favorite').mouseleave
function() {
$(this).removeClass('item-block__button-favorite--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");
}
);
.item-block__buttons {
border-top: 1px solid hsla(0, 0%, 96%, .75);
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
opacity: 1;
-webkit-transition: opacity .2s;
transition: opacity .2s;
z-index: 2;
background: hsla(0, 0%, 100%, .75);
overflow: hidden
}
.item-block:hover .catalog__items-item-slider .carousel__arrow--detail,
.item-block:hover .item-block__buttons {
opacity: 1
}
.item-block__button {
width: 50%;
position: relative;
z-index: 2;
-webkit-transition: opacity .1s, -webkit-transform .2s;
transition: opacity .1s, -webkit-transform .2s;
transition: transform .2s, opacity .1s;
transition: transform .2s, opacity .1s, -webkit-transform .2s
}
.item-block__button-cart--deactive,
.item-block__button-favorite--deactive {
display: none
}
.item-block__button-cart--active,
.item-block__button-favorite--active {
width: 100%
}
.item-block__button-favorite {
border-right: 1px solid hsla(0, 0%, 96%, .7)
}
.item-block__button-favorite--active {
border: none
}
.item-block__button svg {
position: absolute;
top: 50%;
left: 75px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
fill: #4c4b5b;
-webkit-transition: -webkit-transform .2s;
transition: -webkit-transform .2s;
transition: transform .2s;
transition: transform .2s, -webkit-transform .2s
}
.item-block__button i {
position: absolute;
top: 50%;
left: 15px;
line-height: 18px;
font-size: 14px;
color: #b6b8ba;
margin-top: -9px;
right: 15px;
text-align: center
}
.item-block__button-cart svg {
left: auto;
right: 80px
}
.item-block--big .item-block__button svg {
left: 175px
}
.item-block--big .item-block__button-cart svg {
left: auto;
right: 175px
}
.item-block__button-cart--added svg.active-svg {
right: 160px
}
.item-block__button-cart--active svg {
-webkit-transform: translate(-135px, -50%);
transform: translate(-135px, -50%)
}
.item-block--big .item-block__button-cart--active svg {
-webkit-transform: translate(-240px, -50%);
transform: translate(-240px, -50%)
}
.item-block__button-favorite--active svg {
-webkit-transform: translate(30px, -50%);
transform: translate(30px, -50%)
}
.item-block--big .item-block__button-favorite--active svg {
-webkit-transform: translate(130px, -50%);
transform: translate(130px, -50%)
}
.item-block__button a.addet-to-basket-link,
.item-block__button span {
color: #4c4b5b;
text-transform: uppercase;
font-size: 14px;
position: absolute;
top: 20px;
left: 115px;
white-space: nowrap;
letter-spacing: 1.05px;
-webkit-transition: opacity .1s, -webkit-transform .2s;
transition: opacity .1s, -webkit-transform .2s;
transition: transform .2s, opacity .1s;
transition: transform .2s, opacity .1s, -webkit-transform .2s;
opacity: 0
}
.item-block--big .item-block__button span {
left: 215px
}
.item-block__button-cart span {
left: auto;
right: -30px;
color: #ff2438
}
.item-block--big .item-block__button-cart span {
left: auto;
right: 65px
}
.item-block__button-cart--added span {
right: -80px
}
.item-block__button-cart--active span {
opacity: 1;
-webkit-transform: translateX(-135px);
transform: translateX(-135px)
}
.item-block--big .item-block__button-cart--active span {
opacity: 1;
-webkit-transform: translateX(-240px);
transform: translateX(-240px)
}
.item-block__button-favorite--added span {
left: 35px
}
.item-block__button-favorite--active.item-block__button-favorite--added svg {
left: 0
}
.item-block__button-favorite--active span {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px)
}
.item-block--big .item-block__button-favorite--active span {
opacity: 1;
-webkit-transform: translateX(130px);
transform: translateX(130px)
}
.item-block__button-favorite svg {
width: 22px;
fill: #4c4b5b;
height: 18px
}
.item-block__button-cart svg {
width: 35px;
height: 35px;
fill: #ff2438
}
<span class="item-block__buttons">
<span class="js-add-to-favorite item-block__button item-block__button-favorite" data-toggle="tooltip" data-placement="top" onclick="return $.addFavorite('/shop/favorite/', {#id}, this)">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
<span>В избранное</span>
</span>
<span class="js-add-to-basket js-add-to-basket-list item-block__button item-block__button-cart" data-toggle="modal" data-target="#added2basket" data-placement="top" onclick="return $.bootstrapAddIntoCart('/shop/cart/', {#id}, 1)">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="20.5" r="1"/><circle cx="18" cy="20.5" r="1"/><path d="M2.5 2.5h3l2.7 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6l1.6-8.4H7.1"/></svg>
<span>В корзину</span>
</span>
</span>

This code work!
$(document).ready(function() {
$('.item-block__button-cart').mouseenter(function() {
$(this).addClass('item-block__button-cart--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-favorite--deactive");
});
$('.item-block__button-cart').mouseleave(function() {
$(this).removeClass('item-block__button-cart--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-favorite--deactive");
});
$('.item-block__button-favorite').mouseenter(function() {
$(this).addClass('item-block__button-favorite--active');
$(this).find("svg").addClass("active-svg");
$(this).siblings(".item-block__button").addClass("item-block__button-cart--deactive");
});
$('.item-block__button-favorite').mouseleave(function() {
$(this).removeClass('item-block__button-favorite--active');
$(this).find("svg").removeClass("active-svg");
$(this).siblings(".item-block__button").removeClass("item-block__button-cart--deactive");
});
});

How to make an image with text animation at hover mouse signal - HTML + CSS + JS

I am building a website as a presentation of product for my client and I have the need to clone the following feature:
Anyone know how to achieve this?
You can preview the CatWalk Demo in the following link: https://www.templatemonster.com/demo/61202.html

Is that what are you looking for?
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.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__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
<div class="container">
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
</p>
</div>
</article>
</div>
Took me literally 4 seconds searching google and 4 to paste and answer it
From that dude

Responsive image overlay with hover effect on another html element

1st problem: The text overlay is displayed when i hover on the image, but i want that the overlay would be displayed when i hover on the span which has the "point" class, how to make it?
2nd problem: The text overlay isn't responsive, it doesn't fit on the image size and i want that when i resize my image the text overlay would resize with the image, how can i make it?
I would be thanful for a javascript, bootstrap, css or a different answer!
Demo: http://jsfiddle.net/0qgcn2uu/9/
HTML:
<span class="point"></span>
<div class="caption">
<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://localhost/wp-content/themes/twentyfifteen/images/velveti-grid-item-text-1.png">
</a>
</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;
}
/* This block of code is working. When i hover on my img, it gets the overlay
.caption:hover::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;
z-index: 1;
}
.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);
}

To solve 1st problem you need to change:
.caption:hover .caption__overlay {
To:
.point:hover + .caption .caption__overlay {
And the 2nd problem is solved adding:
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
DEMO

Can't get div overflow to work properly

I'm hoping someone can help me with an issue I'm running into. I'm trying to set up a series of photos. That have this CSS/HTML property:
http://jsfiddle.net/i_like_robots/7GvV2/embedded/result%2chtml%2ccss/
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.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__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
I actually got the code from this site.
But there will be upwards of 30 photos, so I was hoping to put them inside a scrolling box/area about 400h x 700w px. When I add the scrolling box, either by HTML, or CSS the results are the same. There is a box, with no scrolling. And all photo's have been shrunken down to fit inside of the box.
Can anyone PLEASE help me with this?
Thanks.

What I've done is removed the CSS for the .container element, in case you want to keep that for a different purpose, and added a .scroller element as a wrapper around the images (within the .container). If you don't have another use for the .container, you can replace .scroller in the CSS with .container, and remove the .container I added to the HTML. A little wordy, so if you need an easier explanation let me know.
So the HTML changes in that there's a new <div> with class scroller surrounding the <article> elements.
The CSS adds the .scroller class, and another rule just to space the images apart a little bit:
.scroller{
margin:0px auto;
height:400px;
max-height:400px;
width:700px;
max-width:700px;
padding:10px 20px;
border:1px solid #aaa;
overflow-y:scroll;
}
.scroller article:not(:last-child){
margin-bottom:10px;
}
Fiddle: http://jsfiddle.net/435rx66s/

What is this scroll box / area?
You've given us this code that you referenced in your implementation, but where is your implementation for us to reference?
The given code works well if you are creating more articles within that container. Give the container a fixed height and set overflow to auto and there should be no problem with getting this content to sit within a scrolling box.
https://jsfiddle.net/i_like_robots/7GvV2/
.container {
height:200px;
overflow:auto;
position:relative;
margin: 0 auto;
max-width: 480px;
}

if you're open to a bit of jquery, there's quite a simple solution.
a short jquery function
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
will show your articles in turn.
$("#container > article:gt(0)").hide();
setInterval(function () {
$('#container > article:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#container');
}, 3000);
/*
* Housekeeping
*/
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
#container {
margin:0 auto;
max-width: 480px;
max-height:240px;
overflow:hidden;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.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__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
article{max-width:480px; max-height:240px; overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
</p>
</div>
</article>
<article class="caption">
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Michigan</h1>
<p class="caption__overlay__content">
Some dummy text for testing
</p>
</div>
</article>
</div>
</div>

Why are the CSS transforms not displayed?

I'm trying to make a navigation panel slide in on the click of a nav button in the main menu. Needless to say, it's not working. I've made this work before, so I'm not sure what's going on. Help?
HTML
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i class="account-control fa fa-user"></i>
</div>
<div class="wrapper">
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li>Billing</li>
<li>Support</li>
<li>Servers</li>
<li>Settings</li>
<li>Reports</li>
</ul>
</nav>
</div>
<!-- Copyright -->
<footer>
<form action="" class="search">
<input type="search" name="search" placeholder="Search">
</form>
<p class="copyright">asdf</p>
</footer>
</div>
</div>
Relevant CSS
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
top: 100px;
z-index: 0;
overflow: hidden;
}
#content {
position: relative;
left: 0;
z-index: 5;
height: 100%;
overflow: auto;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.sidebar-open #content {
-webkit-transform: translate(200px, 0);
-moz-transform: translate(200px, 0);
transform: translate(200px, 0);
}
/* Header */
.header {
background-color: #222222;
width: 100%;
height: 100px;
position: absolute;
top: 0;
z-index: 1;
}
#nav-button {
font-size: 24px;
color: white;
position: absolute;
left: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
#nav-button.open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.account-control {
font-size: 24px;
color: white;
position: absolute;
right: 40px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Navigation */
#sidebar {
position: absolute;
top: 100px;
left: 0;
visibility: hidden;
width: 200px;
height: 100%;
background: #222222;
opacity: 1;
z-index: 1;
-webkit-transform: all 0.5s;
-moz-transform: all 0.5s;
transform: all 0.5s;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.sidebar-open #sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
#sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.sidebar-open #sidebar:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
-moz-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.nav-items {
max-height: 100%;
position: relative;
overflow: auto;
bottom: 60px;
}
.mainmenu ul {
margin: 0;
}
.mainmenu ul li a {
padding: 0 40px;
width: 100%;
line-height: 60px;
display: inline-block;
color: #202020;
text-decoration: none;
}
.mainmenu ul li a :hover, .mainmenu ul li a .active {
background: #e1e1e1;
}
JavaScript
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button, #content').click(function() {
$('#nav-button').toggleClass('open');
$('body').toggleClass('sidebar-open');
return false;
});
});(jQuery);
Yes, I am using FontAwesome. :)

Your biggest issue that solves your original question is due to overflow: hidden; on .wrapper.
Here it is removed: DEMO. But that opens up a whole new world of problems. I advise you to go back and refactor your code.

Have you tried to empty your cache?
Ctrl-Shift-Del so your browser will reload your css.
Note: If this happens to your users, try changing the link to your css in your header like this:
<link rel="stylesheet" href="css/main.css?v=2">