I created a curvy shape at the bottom of this image on this bootstrap card. I'm using bootstrap 5.
This works flawless on a resolution of 1400px and higher. However, on smaller devices the shape seems to disappear (causing the image to be just rectangular) and whatever I try, nothing seems to make a difference.
This is my HTML
<div class="col-lg-3 col-sm-6">
<div class="card h-100">
<div class="card-img">
<img src="..." class="card-img-top img-fluid" alt="">
</div>
<div class="card-body">
<h4 class="card-title">Heroine's Quest: ...</h4>
<h5>Winner of 11 AGS Awards</h5>
<p class="card-text">Heroine's Quest is an adventure / RPG hybrid. Like in many adventure
games, you have a world to save, and must use your wit, guile and inven...</p>
</div>
<div class="card-footer">
<a href="game-details.php" class="btn btn-ags">Learn more <span class="d-none d-sm-inline">
<i class="fas fa-arrow-right"></i></span> </a>
</div>
</div>
</div>
</div>
And this is my CSS:
.card {
box-shadow: 0 0 30px rgba(68, 68, 68, 0.2);
transition: .3s;
background-color: #fff;
margin-top: 10px;
}
#media (min-width: 481px) {
.card:hover {
transform: scale(1.05);
transition: .3s;
}
}
.card .card-img {
position: relative;
overflow: hidden;
height: 200px;
}
.card .card-img img {
max-height: 199px;
width: 100%;
}
.card .card-img:after {
background: url(../img/home-game-highlights-shape.svg) no-repeat center bottom;
background-size: contain;
bottom: 0;
content: "";
height: 100%;
left: 0;
position: absolute;
width: 100%;
z-index: 999;
}
.card .card-footer {
background-color: #fff;
border-top: none;
text-align: center;
}
This is the .svg used:
https://www.rwdb.info/home-game-highlights-shape.svg
And this is the code in JSFiddle:
https://jsfiddle.net/f2Lengk6/
I've been trying for hours and of course just after I posted I found the resolution:
I updated this:
.card .card-img img {
max-height: 199px;
width: 100%;
}
to this:
.card .card-img img {
height: 199px;
width: 100%;
}
Related
I am fairly new to HTML in the past month. I cannot for the life of me, figure out how to change the second image on hover to be a different image when the mouse hovers over it. I know some of the code probably looks dumb with how I tried to guess how I could possibly alter the second hover image. But I am quite confused. If anyone could help that would be great. The only progress I made so far is finally getting them perfectly aligned the way I would want them in the center and also the smooth transition to the hover. All that is left is being stumped on how to change the image to a different one when you hover over the second image. I do not want both hover images to be the same.
* {
background-color: coral;
}
.container {
position: relative;
width: 50%;
overflow: hidden;
display: table-cell;
border: 1px solid transparent;
/* a way to add a space around */
}
#media screen and (max-width:480px) {
.container {
/* make them full-width and one-a-row */
width: 100%;
display: block;
}
}
.image {
display: table-cell;
width: 100%;
height: auto;
transition: all .4s ease-in;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: .5s ease;
background-image: url("sketchcollage.JPG");
color: white;
text-align: center;
padding-top: 40%;
}
.overlay .overlay2 {
background-image: url("digitalartcollage.JPG");
}
a {
color: white;
}
.container:hover .overlay {
opacity: 1;
}
.container:hover .image {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1> Who is Rosalyn? </h1>
<div class="container">
<a href="https://trezoro.co">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<p>Entire element is the link here</p>
</div>
</a>
</div>
<div class="container">
<img src="https://via.placeholder.com/500" alt="Le Tricolore Smartwatch" class="image">
<div class="overlay">
<a href="https://trezoro.co">
</a>
</div>
<div class="overlay2">
<p>Only the text is a link </p>
</div>
</div>
I don't know what is p tags are for, so I removed those. Also, I used a div with background-image instead img tag. when you hover on the container, the image changes.
* {
background-color: coral;
}
.flex{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
height: 50vh;
}
.container {
position: relative;
width: 48%;
overflow: hidden;
}
#media screen and (max-width:480px) {
.container {
width: 100%;
margin-top: 20px;
}
.flex{
height: 100vh;
}
}
.img{
background-size: 100% 100%;
transition: all .4s ease-in;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.img1{
background-image: url('https://s4.uupload.ir/files/5c29cf910a706_8m.jpg');
}
.img2{
background-image: url('https://s4.uupload.ir/files/717195_346_g0du.jpg');
}
a {
color: white;
}
.container:hover .img {
transform: scale(1.2);
-webkit-transform: scale(1.2);
opacity: 0.5;
}
.container:hover .img1{
background-image: url('https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg');
}
.container:hover .img2{
background-image: url('https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg');
}
h1 {
text-align: center;
font-size: 72px;
background: -webkit-linear-gradient(rgb(12, 215, 230), rgb(170, 9, 130));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<h1> Who is Rosalyn? </h1>
<div class="flex">
<div class="container">
<a href="https://trezoro.co">
<div class="img img1"></div>
</a>
</div>
<div class="container">
<div class="img img2"></div>
</div>
</div>
QUESTION
How to change the second image on hover to be a different image when the mouse hovers over it?
ANSWER
The approach of this question is to change an image when the user hovering the mouse over it. This task can be simply done by using the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
.changeImg:hover {
background-image:
url("https://images.app.goo.gl/gfRnCCBPH6r4v3kp6");
}
i am new to creating animations...and i would like to create facebook like animation for loading the screen.
What i am trying to do?
i have a card and i want to represent the loading state by using the facebook like loading (skeleton screen with animation) for the div with class "image".
The code is added here
https://codepen.io/harika123/pen/vYEdoOY
Below is the code,
.container {
display: flex;
flex-direction: row;
}
.card {
box-shadow: 3px 3px 5px 0 rgba(0, 0,0, 0.15);
width: 309px;
position: relative;
top: 200px;
left: 250px;
}
.image {
display:flex;
width: 309px;
height: 176px;
background-color: #cccccc;
}
.loading {
position: relative;
top: 80px;
left: 125px;
width: 82px;
height: 20px;
background-color: white;
border-radius: 10px;
}
h4 {
height: 30px;
}
.text {
padding-left: 16px;
}
.footer {
display: flex;
width: 309px;
height: 72px;
background-color: white;
}
<div class="container">
<div class="card">
<div class="image">
<div class="loading">
<div class="text">loading</div>
<div class="button"></div>
</div>
</div>
<div class="footer">
<div class="info">
<h4>Card Name</h4>
</div>
</div>
</div>
</div>
I have tried to add the animations but is not working (look into code from codepen). how can i add the animations like the facebook loading skeleton screen. for facebook we see left to right shimmering effect. i want it to use 90 deg linear gradient. could someone help me with this. thanks.
I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.
Here's my HTML structure.
<div class="tile">
<img src="some_image" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
And here's my CSS
.gallery .row .tile:hover ~ .tile img {
transform: scale(1.2);
}
However upon hovering over the image, it does not have the expected behaviour.
What's wrong?
EDIT
I got the hover effect to work and I can now fade in text.
Here's my code for that:
<div class="tile">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate">
<div class="overlay">
<div class="text">Mahatma Gandhi</div>
</div>
</div>
CSS
.tile {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.8);
}
.tile:hover .overlay {
opacity: 1;
}
This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that
Here is a jsFiddle that i think will help you to resolve your issue: https://jsfiddle.net/mcs3yn1x/
HTML
<div class="tile">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
CSS
.tile {
border: 2px solid black;
}
.tile:hover img {
transform: scale(1.2);
}
Edit
After hearing alittle more about your issue I have created the following jsFiddle: https://jsfiddle.net/f1gzonjr/4/
HTML
<div class="tile">
<div class="container">
<img src="https://picsum.photos/200/300" class="animate">
<div class="overlay">
<p>Mahatma Gandhi</p>
</div>
</div>
CSS
.tile {
position: relative;
top: 0px;
left: 0px;
height: 300px;
width: 200px;
overflow: hidden;
border: 2px solid black;
}
.container:hover img{
transform: scale(1.2);
}
.overlay{
position: absolute;
display: none;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
.overlay p {
position: relative;
text-align: center;
color: #fff;
}
.tile:hover .overlay{
display: block;
}
Here is an alternate solution. Not sure if its what you wanted.
.tile:hover img, .tile.hover img {transform: scale(1.2);}
Here is the original answer that I adapted: Change background color of child div on hover of parent div?
-----EDIT-----
To stop it scaling and breaking responsiveness you will need to add a container around the image and then set overflow to none.
HTML:
<div class="tile">
<div class="img-container"><img src="https://ichef.bbci.co.uk/news/660/cpsprodpb/16C0E/production/_109089139_928b0174-4b3f-48ff-8366-d118afa1ed56.jpg" class="animate"></div>
<div class="overlay">
<p>Mahatma Gandhi</p>
CSS:
.img-container{
width: 500px;
height: 500px;
overflow: hidden;
}
.tile:hover img, .tile.hover img {
transform: scale(1.2);
}
See the codepen below for an example
https://codepen.io/jamesCyrius/pen/pooqwwv
Here is a code
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 15px;
height: 15px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
<div class="zoom"></div>
I have a small bug that I can't seem to locate. In my snippet you can see how whenever you hover over the image, opactiy and an image scale takes place, as well as a box comes over the image. That is perfect, but my issue is whenever you hover over the text below it, the hover effect takes place over the image.
I can't seem to figure out how for the hover effect to only take place when the mouse is hovering over the image.
Any suggestions would be appreciated.
$('.home-img-block img').addClass(function() {
return (this.width / this.height > 1) ? 'wide' : 'tall';
});
#home-img-block-section {
width: 100%;
height: 900px;
}
#home-img-blocks {
width: 100%;
height: 750px;
}
.home-img-block {
width: 33.33%;
float: left;
display: block;
overflow: hidden;
position: relative;
}
.home-img-container {
position: relative;
overflow: hidden;
cursor: pointer;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-container:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
border: 1px solid #fff;
padding: 20px 25px;
text-align: center;
}
.home-img-container:hover:after {
opacity: 1;
}
.home-img-block img {
display: block;
transition: all 1s ease;
}
.home-img-block:hover img {
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
overflow: hidden;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}
#home-img-block-wording-container {
width: 100%;
height: 300px;
}
.home-img-wording-blocks {
width: 100%;
height: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.home-img-wording-block-title {
padding-top: 30px;
font-size: 1.7em;
}
.home-img-wording-block-description {
padding: 25px 50px 0 50px;
font-size: 1.1em;
color: #5d5d5d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-block-section">
<div id="home-img-blocks">
<div class="home-img-block fadeBlock1">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">WEB DESIGN</div>
<div class="home-img-wording-block-description">The OD team can see your web design visions brought
to life, creating a site that promotes your uniqueness through specific functionalities and features.</div>
</div>
</div>
<div class="home-img-block fadeBlock2">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test2new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">ECOMMERCE</div>
<div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.
gfdgfdsg greg reg regrfesg fdsg gretswtgy tgreswt treswt trgegfd gsvbd fbgre greasgv drfdg greaag gredr</div>
</div>
</div>
<div class="home-img-block fadeBlock3">
<div data-content="FIND OUT MORE" class='home-img-container'>
<img src="http://optimumwebdesigns.com/images/test3new.jpg">
<div class="overlay"></div>
</div>
<div class="home-img-wording-blocks">
<div class="home-img-wording-block-title">MARKETING STRATEGIES</div>
<div class="home-img-wording-block-description">MARKETING STRATEGIES gfdgf fdggs gfsg gfsg gf sgf g
gfdsg sdfggfs gfdsgssdfg fdggfds gfdsg gfds gfdgs gf dsgfdsgfgs gfdgfs gtrg resg reg rgesgresrgrg</div>
</div>
</div>
</div>
</div>
.home-img-block:hover .overlay
and
.home-img-block:hover img
replace them with
.home-img-container:hover .overlay
.home-img-container:hover img
otherwise you're triggering when you hover over the whole container instead of only wheen hovering the img one.
I have a couple of div elements which I want to flip over on hover. A couple things I'm unsure how to do are:
Change the flip speed on off hover (when no longer hovering). I was able to change the flip speed to 0.5s duration on hover, but how do I change the off hover speed?
The front face and back face of the flippable pane has a background color. Why is it being treated as a transparent/glass background where you can see the reverse of the front? I don't want to see the front face mirrored + back face when I should only be able to see the back face.
Any tips?
edit; in case the transparency issue doesn't appear, here's an image of what I see.
The desired display is a solid color panel with "ipsum" and "something" on it. It shouldn't show the mirror image of the front face.
.flip_container {
position: relative;
margin: 10px auto;
width: 270px;
height: 200px;
z-index: 1;
}
.flip_container {
perspective: 1000;
}
.flip_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
.flip_container:hover .flip_card {
transform: rotateY(180deg);
transition-duration: 0.5s;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
font-family: tahoma, sans-serif;
text-align: center;
}
.face.front {
font-weight: bold;
font-size: 13pt;
color: white;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
}
.imagebox {
width: 260px;
height: 160px;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
}
.imagebox img {
width: 250px;
height: 150px;
margin-left: auto;
margin-right: auto;
}
.flip_card.purpleline {
background-color: #BAADBA;
}
.flip_card.blueline {
background-color: #ADB3BA;
}
.smaller {
font-size: 11pt;
}
<div class="flip_container">
<div class="flip_card purpleline">
<div class="front face">
<div class="imagebox">
<img src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg" />
</div>
cat
</div>
<div class="back face">
ipsum
<br/><br/>
<span class="smaller">
sometext
</span>
</div>
</div>
</div>
<div class="flip_container">
<div class="flip_card blueline">
<div class="front face">
<div class="imagebox">
<img src="http://animalia-life.com/data_images/dog/dog7.jpg" />
</div>
dog
</div>
<div class="back face">
lorem
<br/><br/>
<span class="smaller">
sometext
</span>
</div>
</div>
</div>
CSS does not support :mousein or :mouseout.
You can use :hover to add :mousein properties and the usual default class w/o the hover should have your :mouseout properties
Else you always have JS to do the trick.
$('#element').hover(function(e){
if(e.type==='mouseenter' || e.type==='mouseover'){
//your :mousein code
}else if(e.type==='mouseleave'){
//your :mouseout code
}
});
Hope this answers your query.