I have a problem trying to make a gradient effect with CSS.
When I use the position: absolute along with the -webkit-text-fill-color: transparent properties/values, the text disappears. I added my code example as a Stack snippet below.
I think the problem comes from the position property in the CSS
Some letters can be seen without the absolute value, but they are static position.
#exemple {
height: 240px;
}
.colore1 {
position: absolute;
z-index: 0;
text-shadow: #000000 2px 0 10px;
font-family: Catamaran, sans-serif;
font-size: 2em;
}
.colore2 {
position: absolute;
z-index: 1;
background: url(https://gadgetshelp.com/wp-content/uploads/images/lfw/df604a43a760a942fdc6876708fa2d6e.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
font-family: Catamaran, sans-serif;
font-size: 2em;
-webkit-text-stroke: 2px white;
}
span {
display: inline-block;
}
.a001 {
position: static;
left: 174.372px;
top: 166.246px;
transform: translateX(-50%) rotate(-75.5411deg);
}
.a002 {
position: static;
left: 179.27px;
top: 141.066px;
transform: translateX(-50%) rotate(-73.0004deg);
}
.a003 {
position: absolute;
left: 187.312px;
top: 117.025px;
transform: translateX(-50%) rotate(-68.829deg);
}
.a004 {
position: absolute;
left: 198.318px;
top: 94.6583px;
transform: translateX(-50%) rotate(-63.12deg);
}
.a005 {
position: absolute;
left: 212.041px;
top: 74.4662px;
transform: translateX(-50%) rotate(-56.001deg);
}
.a006 {
position: absolute;
left: 228.177px;
top: 56.8995px;
transform: translateX(-50%) rotate(-47.6311deg);
}
.a007 {
position: absolute;
left: 246.364px;
top: 42.3508px;
transform: translateX(-50%) rotate(-38.1972deg);
}
.a008 {
position: absolute;
left: 266.195px;
top: 31.145px;
transform: translateX(-50%) rotate(-27.91deg);
}
.a009 {
position: absolute;
left: 287.229px;
top: 23.5325px;
transform: translateX(-50%) rotate(-16.9993deg);
}
.a010 {
position: absolute;
left: 308.994px;
top: 19.6832px;
transform: translateX(-50%) rotate(-5.70896deg);
}
.a011 {
position: absolute;
left: 331.006px;
top: 19.6832px;
transform: translateX(-50%) rotate(5.70896deg);
}
.a012 {
position: absolute;
left: 352.771px;
top: 23.5325px;
transform: translateX(-50%) rotate(16.9993deg);
}
.a013 {
position: absolute;
left: 373.805px;
top: 31.145px;
transform: translateX(-50%) rotate(27.91deg);
}
.a014 {
position: absolute;
left: 393.636px;
top: 42.3508px;
transform: translateX(-50%) rotate(38.1972deg);
}
.a015 {
position: absolute;
left: 411.823px;
top: 56.8995px;
transform: translateX(-50%) rotate(47.6311deg);
}
.a016 {
position: absolute;
left: 427.959px;
top: 74.4662px;
transform: translateX(-50%) rotate(56.001deg);
}
.a017 {
position: absolute;
left: 441.682px;
top: 94.6583px;
transform: translateX(-50%) rotate(63.12deg);
}
.a018 {
position: absolute;
left: 452.688px;
top: 117.025px;
transform: translateX(-50%) rotate(68.829deg);
}
.a019 {
position: absolute;
left: 460.73px;
top: 141.066px;
transform: translateX(-50%) rotate(73.0004deg);
}
.a020 {
position: static;
left: 465.628px;
top: 166.246px;
transform: translateX(-50%) rotate(75.5411deg);
}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Test Gradient Example</title>
</head>
<body>
<div id="exemple" style="height: 240px;">
<div class="colore1" style="width: 640px; height: 100vh; text-align: center; padding-top: 250px; font-size: 55px;">
<span class="a001">B</span>
<span class="a002">o</span>
<span class="a003">n</span>
<span class="a004"> </span>
<span class="a005">A</span>
<span class="a006">n</span>
<span class="a007">n</span>
<span class="a008">i</span>
<span class="a009">v</span>
<span class="a010">e</span>
<span class="a011">r</span>
<span class="a012">s</span>
<span class="a013">a</span>
<span class="a014">i</span>
<span class="a015">r</span>
<span class="a016">e</span>
<span class="a017"> </span>
<span class="a018">!</span>
<span class="a019">!</span>
<span class="a020">!</span>
</div>
<div class="colore2" style="width: 640px; height: 100vh; text-align: center; padding-top: 250px; font-size: 55px;">
<span class="a001">B</span>
<span class="a002">o</span>
<span class="a003">n</span>
<span class="a004"> </span>
<span class="a005">A</span>
<span class="a006">n</span>
<span class="a007">n</span>
<span class="a008">i</span>
<span class="a009">v</span>
<span class="a010">e</span>
<span class="a011">r</span>
<span class="a012">s</span>
<span class="a013">a</span>
<span class="a014">i</span>
<span class="a015">r</span>
<span class="a016">e</span>
<span class="a017"> </span>
<span class="a018">!</span>
<span class="a019">!</span>
<span class="a020">!</span>
</div>
</div>
</body>
</html>
Related
This circular ring should be rotating around the hoodie guy. But for now, it is rotating in front of the hoodie guy. And here is the video preview for reference.
.body-part-2 {
position: relative;
}
.background-circle {
background: #28292d;
border-radius: 50%;
width: 550px;
height: 550px;
z-index: 9;
}
.hoodie-guy {
position: absolute;
background: url(assets/Hoodie-guy.png);
top: 100px;
height: 550px;
width: 550px;
background-size: cover;
}
.circle {
position: relative;
top: 400px;
left: 220px;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: animateCircle 40s linear infinite;
}
#keyframes animateCircle
{
0%
{
transform: perspective(1000px) rotateY(0deg) rotateX(15deg) translateY(-30px);
}
100%
{
transform: perspective(1000px) rotateY(360deg) rotateX(15deg) translateY(-30px);
}
}
.circle span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #2d2e32;
box-shadow: 0px 0px 5px #00000080;
border-radius: 50%;
transform-origin: center;
transform-style: preserve-3d;
transform: rotateY(calc(var(--i) * calc(360deg / 11))) translateZ(300px);
}
.circle span img {
position: relative;
top: 12px;
left: 12px;
object-fit: cover;
}
<div class="body-part-2">
<div class="hoodie-guy-animation-class">
<div class="hoodie-guy"></div>
<div class="circle">
<span style="--i:1;"><img src="assets/flutter.png" height="75px"></span>
<span style="--i:2;"><img src="assets/python.png" height="75px"></span>
<span style="--i:3;"><img src="assets/photoshop.png" height="75px"></span>
<span style="--i:4;"><img src="assets/django.png" height="75px"></span>
<span style="--i:5;"><img src="assets/premiere_pro.png" height="75px"></span>
<span style="--i:6;"><img src="assets/html.png" height="70px"></span>
<span style="--i:7;"><img src="assets/figma.png" height="75px"></span>
<span style="--i:8;"><img src="assets/css.png" height="70px"></span>
<span style="--i:9;"><img src="assets/javascript.png" height="75px"></span>
<span style="--i:10;"><img src="assets/illustrator.png" height="75px"></span>
<span style="--i:11;"><img src="assets/dart.png" height="75px"></span>
</div>
</div>
<div class="background-circle"></div>
</div>
I am trying to animate the truck over road on the image. I have made the snipped for it below. all of images are on svg file. But i am not sure how to animate the tuck within the road. how can i animate the truck so that it goes within the road ?
.page-header {
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
}
.truck-2 {
width: 100px;
position: absolute;
top: 76%;
left: 62%;
transform: rotate(32deg);
width: 80px;
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
<img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>
What you need to examine is CSS Animations. After that, you can go with something like this:
.page-header {
position: relative;
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
animation: truck1 5s infinite;
}
#keyframes truck1 {
0% {
top: 57%;
left: 29%;
transform: rotate(0);
}
20% {
top: 68%;
left: 20%;
transform: rotate(0);
}
40% {
top: 68%;
left: 20%;
transform: rotate(90deg);
}
60% {
top: 30%;
left: 5%;
transform: rotate(90deg);
}
80% {
top: 30%;
left: 5%;
transform: rotate(120deg);
}
100% {
top: 10%;
left: 5.5%;
transform: rotate(120deg);
}
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>
Also on JSFiddle.
Please note, in order to work with absolute positioning and percents, the parent element has to be position: relative;, or any other than static.
Did you need it?
.page-header {
animation: trucks 10s infinite;
background: url('http://umangashrestha.com.np/portpro/assets/images/road-map.svg');
height: 800px;
background-size: 100%;
background-position: center;
width: 790px;
}
.truck-1 {
width: 100px;
position: absolute;
top: 57%;
left: 29%;
width: 80px;
}
.truck-2 {
width: 100px;
position: absolute;
top: 76%;
left: 62%;
transform: rotate(32deg);
width: 80px;
}
#keyframes trucks {
0% {background-position: 0 0; }
100% {background-position: 0 -2100px; }
}
<div class="page-header">
<img class="truck-1" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
<img class="truck-2" src="http://umangashrestha.com.np/portpro/assets/images/truck.svg" />
</div>
I have implemented an analog clock with a minute hand and an hour hand. The purpose of this exercise is to rotate the clock hands to the corresponding angle of the hour label when dragging; i.e., when the mouse is being move around.
Some examples I've found use JQuery and other libraries. I am trying to do this with vanilla js only. I've looked at some examples located here, in stackoverflow, as well as other places and studying the logic and trying to understand the documentation of atan2, this is as far as I've been able to get:
//rotate handler
const rotateHand = (event)=>{
const elem = event.target;
elem.style.cursor = "grabbing";
let rotating = true;
const clock = document.querySelector(".gamut__timePicker__clock");
const radius = 252 / 2;
const rotateHandler = (e)=>{
const radians = Math.atan2(e.pageX - radius, e.pageY - radius);
let rotateDegrees = (radians * (180 / Math.PI) * -1) -180;
if (rotating) {
elem.style.transform = `rotate(${rotateDegrees}deg)`;
}
};
document.addEventListener("mousemove", rotateHandler);
const cancelRotate = (event)=>{
elem.style.cursor = "grab";
rotating = !rotating;
document.removeEventListener("mousemove", rotateHandler);
document.removeEventListener("mouseup", cancelRotate);
};
document.addEventListener("mouseup", cancelRotate);
};
document.querySelector(".gamut__timePicker__minHand").addEventListener("mousedown", rotateHand);
document.querySelector(".gamut__timePicker__hrHand").addEventListener("mousedown", rotateHand);
#import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
.gamut__timePicker {
border: 1px solid gray;
width: 300px;
height: 335px;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
font-family: 'Roboto', sans-serif;
}
.gamut__timePicker__meridiamSelector {
height: 20px;
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.gamut__timePicker__meridiamSelector--meridiam {
text-align: center;
-webkit-box-flex: 1;
flex-grow: 1;
border: 1px solid gray;
font-size: 0.875rem;
line-height: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gamut__timePicker__meridiamSelector--meridiam:hover {
background: #efefef;
}
.gamut__timePicker__meridiamSelector--selected {
background: #607d8b !important;
color: white;
}
.gamut__timePicker__clockWrapper {
-webkit-box-flex: 1;
flex-grow: 1;
align-self: stretch;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: relative;
}
.gamut__timePicker__clock {
border-radius: 50%;
width: 250px;
height: 250px;
border: 1px solid gray;
margin: 0 auto;
position: relative;
}
.gamut__timePicker__clock--minPointer {
width: 1px;
height: 10px;
background-color: #424242;
position: absolute;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.gamut__timePicker__clock--hrPointer {
position: absolute;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.gamut__timePicker__clock--hrPointer::before {
top: -4px;
left: -7px;
content: "\25BC";
position: absolute;
}
.gamut__timePicker__labels {
border-radius: 50%;
width: 210px;
height: 210px;
margin: 0 auto;
position: absolute;
pointer-events: none;
}
.gamut__timePicker__labels--hourLabel {
position: absolute;
-webkit-transform: translate(-50%, -45%);
transform: translate(-50%, -45%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gamut__timePicker__minHand {
width: 20px;
height: 100px;
background-image: url(https://res.cloudinary.com/dvzwvxhev/image/upload/v1578025454/clock_min.svg);
background-size: 100% 100%;
position: absolute;
-webkit-transform-origin: 49% 92%;
transform-origin: 49% 92%;
top: 15%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
cursor: -webkit-grab;
cursor: grab;
}
.gamut__timePicker__hrHand {
width: 40px;
height: 70px;
background-image: url(https://res.cloudinary.com/dvzwvxhev/image/upload/v1578274567/clock_hr.svg);
background-size: 100% 100%;
position: absolute;
-webkit-transform-origin: 50% 93%;
transform-origin: 50% 93%;
top: 25%;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
cursor: -webkit-grab;
cursor: grab;
}
.gamut__timePicker__time {
height: 34px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.gamut__timePicker__time > input {
width: 35px;
border: none;
border-bottom: 1px solid #ababab;
text-align: center;
font-size: 1.125rem;
outline: none;
height: 25px;
padding: 0;
}
.gamut__timePicker__time > input:focus {
border-bottom: 2px solid #607d8b;
}
.gamut__timePicker__time--separator {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 1.125rem;
height: 25px;
}
.gamut__timePicker__done {
background: #efefef;
text-align: center;
border-top: 1px solid gray;
cursor: pointer;
}
<div class="gamut__timePicker" style="top: 31px; left: 8px; z-index: 9;"><div class="gamut__timePicker__meridiamSelector"><div data-meridiam-value="am" class="gamut__timePicker__meridiamSelector--meridiam gamut__timePicker__meridiamSelector--selected">AM</div><div data-meridiam-value="pm" class="gamut__timePicker__meridiamSelector--meridiam">PM</div></div><div class="gamut__timePicker__clockWrapper"><div class="gamut__timePicker__clock"><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(90deg); left: 100%; top: 50%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(96deg); left: 99.7261%; top: 55.2264%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(102deg); left: 98.9074%; top: 60.3956%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(108deg); left: 97.5528%; top: 65.4508%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(114deg); left: 95.6773%; top: 70.3368%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(120deg); left: 93.3013%; top: 75%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(126deg); left: 90.4508%; top: 79.3893%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(132deg); left: 87.1572%; top: 83.4565%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(138deg); left: 83.4565%; top: 87.1572%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(144deg); left: 79.3893%; top: 90.4508%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(150deg); left: 75%; top: 93.3013%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(156deg); left: 70.3368%; top: 95.6773%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(162deg); left: 65.4508%; top: 97.5528%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(168deg); left: 60.3956%; top: 98.9074%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(174deg); left: 55.2264%; top: 99.7261%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(180deg); left: 50%; top: 100%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(186deg); left: 44.7736%; top: 99.7261%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(192deg); left: 39.6044%; top: 98.9074%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(198deg); left: 34.5492%; top: 97.5528%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(204deg); left: 29.6632%; top: 95.6773%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(210deg); left: 25%; top: 93.3013%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(216deg); left: 20.6107%; top: 90.4508%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(222deg); left: 16.5435%; top: 87.1572%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(228deg); left: 12.8428%; top: 83.4565%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(234deg); left: 9.54915%; top: 79.3893%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(240deg); left: 6.69873%; top: 75%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(246deg); left: 4.32273%; top: 70.3368%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(252deg); left: 2.44717%; top: 65.4508%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(258deg); left: 1.09262%; top: 60.3956%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(264deg); left: 0.273905%; top: 55.2264%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(270deg); left: 0%; top: 50%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(276deg); left: 0.273905%; top: 44.7736%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(282deg); left: 1.09262%; top: 39.6044%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(288deg); left: 2.44717%; top: 34.5492%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(294deg); left: 4.32273%; top: 29.6632%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(300deg); left: 6.69873%; top: 25%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(306deg); left: 9.54915%; top: 20.6107%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(312deg); left: 12.8428%; top: 16.5435%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(318deg); left: 16.5435%; top: 12.8428%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(324deg); left: 20.6107%; top: 9.54915%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(330deg); left: 25%; top: 6.69873%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(336deg); left: 29.6632%; top: 4.32273%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(342deg); left: 34.5492%; top: 2.44717%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(348deg); left: 39.6044%; top: 1.09262%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(354deg); left: 44.7736%; top: 0.273905%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(360deg); left: 50%; top: 0%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(366deg); left: 55.2264%; top: 0.273905%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(372deg); left: 60.3956%; top: 1.09262%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(378deg); left: 65.4508%; top: 2.44717%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(384deg); left: 70.3368%; top: 4.32273%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(390deg); left: 75%; top: 6.69873%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(396deg); left: 79.3893%; top: 9.54915%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(402deg); left: 83.4565%; top: 12.8428%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(408deg); left: 87.1572%; top: 16.5435%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(414deg); left: 90.4508%; top: 20.6107%;"></div><div class="gamut__timePicker__clock--hrPointer" style="transform: rotate(420deg); left: 93.3013%; top: 25%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(426deg); left: 95.6773%; top: 29.6632%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(432deg); left: 97.5528%; top: 34.5492%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(438deg); left: 98.9074%; top: 39.6044%;"></div><div class="gamut__timePicker__clock--minPointer" style="transform: rotate(444deg); left: 99.7261%; top: 44.7736%;"></div></div><div class="gamut__timePicker__labels"><span class="gamut__timePicker__labels--hourLabel" style="left: 100%; top: 50%;">3</span><span class="gamut__timePicker__labels--hourLabel" style="left: 93.3013%; top: 75%;">4</span><span class="gamut__timePicker__labels--hourLabel" style="left: 75%; top: 93.3013%;">5</span><span class="gamut__timePicker__labels--hourLabel" style="left: 50%; top: 100%;">6</span><span class="gamut__timePicker__labels--hourLabel" style="left: 25%; top: 93.3013%;">7</span><span class="gamut__timePicker__labels--hourLabel" style="left: 6.69873%; top: 75%;">8</span><span class="gamut__timePicker__labels--hourLabel" style="left: 0%; top: 50%;">9</span><span class="gamut__timePicker__labels--hourLabel" style="left: 6.69873%; top: 25%;">10</span><span class="gamut__timePicker__labels--hourLabel" style="left: 25%; top: 6.69873%;">11</span><span class="gamut__timePicker__labels--hourLabel" style="left: 50%; top: 0%;">12</span><span class="gamut__timePicker__labels--hourLabel" style="left: 75%; top: 6.69873%;">1</span><span class="gamut__timePicker__labels--hourLabel" style="left: 93.3013%; top: 25%;">2</span></div><div class="gamut__timePicker__minHand" style="transform: rotate(0deg);"></div><div class="gamut__timePicker__hrHand" style="transform: rotate(240deg);"></div></div><div class="gamut__timePicker__time"><input type="text" data-time-param="hour"><span class="gamut__timePicker__time--separator">:</span><input type="text" data-time-param="minute"></div><div class="gamut__timePicker__done">DONE</div></div>
As you can see on the above snippet, the clock hand is rotating but the angle is not exact, there is a bit of discrepancy. The goal is that the hand points to the correct hour/minute when the mouse pointer is at an angle that corresponds to the respective hour.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
as above code when we hover over the image it gets overlay effect but on mouse leave, I don't want this reverse effect. when mouse leave happens I just want to hide overlay and show the image as at starting.how can I achieve this.
I have tried using javascript but nothing worked for me.help me.
ref code:link
Move the transition to the hover state
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height: 0;
}
.container:hover .overlay {
height: 100%;
transition: .5s ease;
/* here */
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="http://www.fillmurray.com/460/300" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope you are doing well! I want to make my card slider work by clicking on arrows. It is already working when we click next or prev card. but I want to make it work by clicking on arrows too. click left icon to go left or click the right icon to go right card.
Is it possible to make arrows work?
Thankyou for help.
$num = $('.my-card').length;
$even = $num / 2;
$odd = ($num + 1) / 2;
if ($num % 2 == 0) {
$('.my-card:nth-child(' + $even + ')').addClass('active');
$('.my-card:nth-child(' + $even + ')').prev().addClass('prev');
$('.my-card:nth-child(' + $even + ')').next().addClass('next');
} else {
$('.my-card:nth-child(' + $odd + ')').addClass('active');
$('.my-card:nth-child(' + $odd + ')').prev().addClass('prev');
$('.my-card:nth-child(' + $odd + ')').next().addClass('next');
}
$('.my-card').click(function() {
$slide = $('.active').width();
console.log($('.active').position().left);
if ($(this).hasClass('next')) {
$('.card-carousel').stop(false, true).animate({left: '-=' + $slide});
} else if ($(this).hasClass('prev')) {
$('.card-carousel').stop(false, true).animate({left: '+=' + $slide});
}
$(this).removeClass('prev next');
$(this).siblings().removeClass('prev active next');
$(this).addClass('active');
$(this).prev().addClass('prev');
$(this).next().addClass('next');
});
// Keyboard nav
$('html body').keydown(function(e) {
if (e.keyCode == 37) { // left
$('.active').prev().trigger('click');
}
else if (e.keyCode == 39) { // right
$('.active').next().trigger('click');
}
});
html body {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow-x: hidden;
}
.card-carousel {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.card-carousel .my-card {
height: 400px;
width: 500px;
position: relative;
z-index: 1;
-webkit-transform: scale(0.6) translateY(-2rem);
transform: scale(0.6) translateY(-2rem);
opacity: 0;
cursor: pointer;
pointer-events: none;
background: #2e5266;
background: linear-gradient(to top, #2e5266, #6e8898);
transition: 1s;
}
.card-carousel .my-card:after {
content: '';
position: absolute;
height: 2px;
width: 100%;
border-radius: 100%;
background-color: rgba(0,0,0,0.3);
bottom: -5rem;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.card-carousel .my-card:nth-child(0):before {
content: '0';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(1):before {
content: '1';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(2):before {
content: '2';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(3):before {
content: '3';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(4):before {
content: '4';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(5):before {
content: '5';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(6):before {
content: '6';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(7):before {
content: '7';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(8):before {
content: '8';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(9):before {
content: '9';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card.active {
z-index: 3;
-webkit-transform: scale(1) translateY(0) translateX(0);
transform: scale(1) translateY(0) translateX(0);
opacity: 1;
pointer-events: auto;
transition: 1s;
}
.card-carousel .my-card.prev, .card-carousel .my-card.next {
z-index: 2;
-webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
transform: scale(0.8) translateY(-1rem) translateX(0);
opacity: 0.6;
pointer-events: auto;
transition: 1s;
}
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="heading">
</div>
<div class="card-carousel">
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
</div>
<div style="font-size:70px">
<i class="fas fa-chevron-circle-left"></i>
<i class="fas fa-chevron-circle-right"></i>
</div>
</body>
</html>
Quick answer: https://codepen.io/anon/pen/dgeaRo
Explenation:
What I did was add a class and an Id to your a items and created a Javascript method that mostly does the same as the $('.my-card').click function.
This works and should give you a general idea should you want to make changes