I am making a carousel with react-slick and trying to add hover transition to it. But the picture can only scale in 1 direction.
My css:
.carousel {
margin-bottom: 10rem;
margin-left: 3.75rem;
margin-right: 3.75rem;
.slider-container {
div {
img {
width: 100%;
padding-right: 2px;
padding-left: 2px;
transition: transform .3s;
border-radius: 5px;
&:hover {
transform: scale(1.3);
transition: transform .6s;
border-radius: 5px;
}
}
}
}
}
react.js:
<div className="carousel">
<h2> Trending </h2>
<Slider {...settings} className="slider-container">
<div>
<img src={img1} alt=""/>
</div>
You need to set
.slick-list {
overflow: visible;
}
This will overwrite current slick overflow value and allow children to overflow
Related
I am working on a site where there is an info icon next to the logo in the center of the page. When hovering over the info icon, a text box displays. For some reason, when the screen width is shorter than around 1300px, the entire logo as well as the info box is pulled down vertically. Not sure what aspect of onhover could be causing this.
I tried to manually move down the info icon with media queries but that is not a good way of doing it.
Here is react component:
function HomeContent() {
return (
<>
<div className="center-div">
<img src={tenGreenLogo} className="ten-green-logo" alt=""></img>
<div className="info-div">
<img src={infoIcon} alt="" className="info-icon"></img>
<p className="hidden-info">
The 10Green Score indicates the health of your environment using a
number from 0 to 10. The higher the score, the healthier your
environment.
<br></br>
<br></br>
Factors that can reduce your score include unhealthy air quality
readings and poor environmental monitoring.
</p>
</div>
</div>
<Globe />
</>
);
}
export default HomeContent;
and here is CSS for that component:
.center-div {
display: flex;
justify-content: center;
align-items: center;
padding-top: 7rem;
padding-bottom: 0rem;
scroll-behavior: smooth;
}
.ten-green-logo {
max-width: 40%;
animation: transitionIn 1s;
padding-right: 1rem;
}
.info-div {
width: 2rem;
margin-top: auto;
margin-bottom: 0;
}
.info-icon {
width: 2rem;
animation: transitionIn 1s;
}
.hidden-info {
display: none;
}
.info-icon:hover + .hidden-info {
display: block;
position: relative;
background-color: white;
padding: 0.6rem;
border-radius: 5%;
width: 20rem;
font-size: 80%;
right: 7.5rem;
top: 10.5rem;
}
.info-icon:hover {
position: relative;
top: 10.6rem;
}
#keyframes transitionRight {
from {
transform: translateX(0rem);
}
to {
transform: translateX(2rem);
}
}
#keyframes transitionIn {
from {
opacity: 0;
transform: translateY(4rem);
}
to {
opacity: 1;
transform: translateY(0rem);
}
}
Any help would be greatly appreciated.
use this style, you have to use position absolute on hidden-info
.info-div {
position: relative;
}
.hidden-info {
display: none;
position: absolute;
background-color: white;
padding: 0.6rem;
border-radius: 5%;
width: 20rem;
font-size: 80%;
right: 7.5rem;
top: 10.5rem;
}
.info-icon:hover + .hidden-info {
display: block;
}
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 5 months ago.
i'm new here and still learn to become Web designer and this is my big issue
why #btnC can effect on #btnB and #btnB can't effect on #btnC ??
i try to use "~,+, , >" and all of thease didn't work i need to know more details about hovering items on each other,
could you help me please ?????
this is my code ⬇⬇⬇⬇⬇
<style>
.countainer{
width: 500px;
}
.box{
height: 100%;
}
#btnC{
display: inline-block;
text-align: center;
position: absolute;
background-color: #009fdf;
border-radius: 50px;
margin-left: 205px;
margin-top:550px;
text-decoration: none;
color:#F2F2F2;
transition: 0.8s;
}
#btnB{
display: inline-block;
text-align: center;
position: absolute;
background-color: #ffcc00;
border-radius: 50px;
margin-left: 380px;
margin-top:550px;
text-decoration: none;
color:#53565A;
transition: 0.8s;
}
#btnC div, #btnB div {
width:150px;
padding: 20px 0;
}
#btnC:hover {
transform: scale(1.2);
background-color:#ffffff;
color:#009fdf;
transition: 0.8s;
}
#btnC:hover ~ #btnB {
margin-left: 400px;
}
#btnB:hover{
transform: scale(1.2);
background-color:#ffffff;
color:#ffcc00;
transition: 0.8s;
}
#btnB:hover #btnC {
margin-left: 195px;
}
</style>
<div class="countainer">
<div class="box">
<a id="btnC" href="#"><div>Individual</div></a>
<a id="btnB" href="#"><div>Team</div></a>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a8687897-418c-40db-b92b-af479b5b1cb6/d5cyk3x-ee5a53c6-240b-400a-8ee6-64e0ac9bd4ed.jpg/v1/fill/w_900,h_360,q_75,strp/background_2012_by_davicinpuntocom-d5cyk3x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9hODY4Nzg5Ny00MThjLTQwZGItYjkyYi1hZjQ3OWI1YjFjYjYvZDVjeWszeC1lZTVhNTNjNi0yNDBiLTQwMGEtOGVlNi02NGUwYWM5YmQ0ZWQuanBnIiwid2lkdGgiOiI8PTkwMCIsImhlaWdodCI6Ijw9MzYwIn1dXX0.jLqQ7mUnFBNhVh_NpAO5plPheYvTtzQ0JvZ_8gLr5sY" width="1700px" alt="">
</div>
</div>
CSS have not selector for previous sibling elements, but you can use :has selector for the problem:
#btnC:has( + #btnB:hover) {
margin-left: 190px;
}
Having a div with dynamic content of scrollable logs, how can I make a transition when it shows/hide
I need its height gradually increase/decrease.
<div className={logsClass}>
<div className={isOpened ? 'show' : 'hide'}>
<p dangerouslySetInnerHTML={{__html: formatNote(props.logs)}}/>
<div ref={dummy} className='a' />
</div>
</div>
Here is my CSS:
.show{
opacity: 1;
visibility: visible;
}
.hide{
visibility : hidden;
opacity: 0
}
.rc_logsContent {
overflow-y: auto;
background-color: #2b2b2b;
color: white;
padding-left: 5px;
padding-right: 5px;
border-radius: 5px;
transition: height 500ms;
}
I am trying to animate the slide in/out of my flyout however it doesn't transition but appear and disappear in the same place.
in chrome devtools the animation works if I tick/untick right: 0;
How can I slide in/out the flyout correctly?
<template>
<portal to="modalPortal">
<div
v-if="isMoreOffersFlyoutActive"
:id="id"
class="flyOut"
#click.self="sendCloseModal(true)">
<div
:class="['flyOut__container', {'flyOut__container--active': isMoreOffersFlyoutActive}]">
<div class="flyOut__buttonContainer">
<button
id="storeInfoClose"
class="flyOut__button"
#click="sendCloseModal(false)">
<icon
:scale="closeButtonIconScale"
name="close"
color="white" />
</button>
</div>
<div class="flyOut__content">
<slot />
</div>
</div>
</div>
</portal>
</template>
.flyOut {
position: fixed;
top: 0;
left: 0;
z-index: z("overlay");
display: flex;
justify-content: flex-end;
width: 100%;
height: 100%;
overflow: auto;
background-color: $black-alpha;
&__container {
position: relative;
z-index: z("modal");
right: -50%;
width: 50%;
height: 100%;
background-color: $white;
box-shadow: -2px 0 15px 5px rgba(0,0,0,0.2);
transition: right ease 0.5s;
&--active {
right: 0;
transition: right ease 0.5s;
background: #ff00ff;
}
}
There isn't really an issue with Vue here. The problem stems from trying to animate a position between two different units (or in your case units and no units). Changing right: 0; to right: 10%; would probably work.
All that said, PLEASE don't animate CSS position. It's not performant and causes the browser to reflow & repaint stuff. The better solution is to use css translate(). Here's an example...
.wrapper {
/* need a positioned container for SO's editor */
position: fixed;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
}
.action{
margin: 30px;
font-size: 18px;
font-weight: bold;
cursor:pointer;
font-family: sans-serif;
}
.moved{
position: absolute;
/* put the element where you want it */
top:0;
right:0;
bottom:0;
width: 150px;
background: #333;
padding: 20px;
color: #fff;
/* use transform to move to a new position (100% of element width) */
transform: translatex(100%);
transition: transform 0.5s cubic-bezier(.47,1.64,.41,.8);
}
.action:hover+.moved {
transform: translatex(0);
}
<div class="wrapper">
<div class="action">Hover Me</div>
<div class="moved">Transformed element</div>
</div>
I am using this fork code to display text on mouseover of an image.
http://codepen.io/anon/pen/hxqoe
HTML
<img src="http://placekitten.com/150" alt="some text" />
<img src="http://placekitten.com/150" alt="more text" />
<img src="http://placekitten.com/150" alt="third text" />
<div id="text"></div>
CSS
div {
display: none;
position: absolute;
}
img:hover + div {
display: block;
}
JQUERY
$('img').hover(function() {
$('div').html($(this).attr('alt')).fadeIn(200);
}, function() {
$('div').html('');
});
I am looking for the div text to be displayed inside each image instead of a stationary div.
Any ideas?
You actually don't need jQuery for this. It can easily be achieved with pure CSS.
In this example, I use the :after pseudo element to add the content from the alt attribute of the parent div. You can add whatever styling you want..
jsFiddle here - Updated to include a fade
HTML - pretty simple
<div alt="...">
<img src="..."/>
</div>
CSS
div {
position: relative;
display: inline-block;
}
div:after {
content: attr(alt);
height: 100%;
background: rgba(0, 0, 0, .5);
border: 10px solid red;
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
box-sizing: border-box;
text-align: center;
color: white;
padding: 12px;
font-size: 20px;
opacity: 0;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
}
div:hover:after {
opacity: 1;
}
Change your javascript to this:
$('img').hover(function() {
$('div').html($(this).attr('alt')).fadeIn(200);
$('div').css('left',$(this).offset().left + 'px');
$('div').css('top',$(this).offset().top + $(this).height() - 20 + 'px');
}, function() {
$('div').html('');
});
And that should do the trick.
I would wrap your images in some kind of wrapper and then use CSS for the hover effect (DEMO).
HTML:
<div class="img-wrapper">
<img src="http://placekitten.com/150" alt="some text 1" />
<div class="img-desc">some text 1</div>
</div>
CSS:
.img-wrapper {
position: relative;
display: inline;
}
.img-desc {
display: none;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: #FFF;
opacity: 0.6;
padding: 5px;
}
.img-wrapper:hover .img-desc{
display: block;
}
I added an alternative solution with additional css transition to the demo.
To get a transition just control the visibility with opacity:
.img-desc {
/*...*/
opacity: 0;
/*...*/
}
.img-wrapper:hover .img-desc{
opacity: 0.6;
transition: opacity 0.4s ease-in;
}