Am trying to achieve this animation on the CISO website header. I created a fiddle showing what i was able to achieve but something seems off.
img {
transition: all .3s ease;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
height: auto;
}
#img2 {}
#img1,
#img3 {
z-index: 3;
}
/* hover effects */
#img2:hover {
transform: scaleX(1.08);
z-index: 8;
}
#img1:hover {
transform: scaleX(1.08);
z-index: 8;
}
#img3:hover {
transform: scaleX(1.08);
z-index: 8;
}
<div class="container">
<div class="d-flex bd-highlight">
<div class="flex-fill bd-highlight">
<img src="https://placeimg.com/640/480/animals" alt="" id="img1">
</div>
<div class="flex-fill bd-highlight">
<img src="https://placeimg.com/640/480/nature" alt="" id="img2">
</div>
<div class="flex-fill bd-highlight">
<img src="https://placeimg.com/640/480/arch" alt="" id="img3">
</div>
</div>
</div>
Am using bootstrap framework to align the images.
Just add this css
.flex-fill{
display:inline-block;
width:33%;
}
img:not(:hover) {
transition: none;
}
Related
I have a card item as you see in the picture, opacity is 0.5:
When I hover I want to display some information on it like in the picture again:
So here is my example;
.card-img {
width: 100%;
border-radius: calc(0.3rem - 0px);
}
.card-img-top {
width: 100%;
border-radius: 32px;
opacity: 0.5;
}
.card-img-top:hover {
opacity: 1;
}
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="img/banner-1.png" alt="Open Project 1">
<div class="banner-content">
Description
</div>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</a>
</div>
</div>
So what I am trying to achieve in this example, when I hover I want to display Description (banner-content) and I want to set the opacity to 1 which I am already doing.
You can use + selector wicth select the adjacent sibling. More on mdn
.card{
position:relative;
}
.card-img {
width: 100%;
max-width:150px;
border-radius: calc(0.3rem - 0px);
}
.card-img-top {
border-radius: 32px;
opacity: 0.5;
width:150px;
}
.card-img-top:hover {
opacity: 1;
}
.banner-content{
position:absolute;
top:0;
left:0;
display:none;
}
.card-img-top:hover + .banner-content{display:block;}
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="https://via.placeholder.com/50" alt="Open Project 1">
<div class="banner-content">
Description
</div>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</a>
</div>
</div>
Step 1: I make a .top-layout class with opacity: 0 to keep it hide by default.
Step 2: Use .card:hover .top-layout selector in CSS to set what style you want when the card item is hover.
.card {
width: 100%;
border-radius: calc(0.3rem - 0px);
}
.card:hover .top-layout {
opacity: 0.5 !important;
}
.top-layout {
opacity: 0;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
.card-img-top {
width: 100%;
border-radius: 32px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="https://image.freepik.com/free-vector/comic-colorful-frame-background_52683-71995.jpg" alt="Open Project 1">
<div class="top-layout">
<div class="banner-content">
Description
</div>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</div>
</a>
</div>
</div>
Put a Adjacent Sibling Selector when you hover on img and display the content .
+ is used here which selects the first .banner-content element that is placed immediately after .card-img-top element .
Find more info here about combinators
.card {
position: relative;
}
.banner-content {
position: absolute;
top: 20px;
left: 20px;
display:none;
}
.card-img {
width: 100%;
border-radius: calc(0.3rem - 0px);
}
.card-img-top {
width: 400px;
height:200px;
border-radius: 32px;
opacity: 0.5;
}
.card-img-top:hover {
opacity: 1;
}
.card-img-top:hover + .banner-content {
display: block;
}
<div class="col-md-6">
<div class="card">
<a href="#">
<img class="card-img-top img-raised" src="https://pixy.org/src/477/4774988.jpg" alt="Open Project 1">
<div class="banner-content">
I am a new coder.<br> Happy to meet : )
</div><br>
<a class="mb-2 mt-2 text-center small-xl" href="#">Check More Details</a>
</a>
</div>
</div>
I have these images in a simple responsive grid that I am trying to add an overlay for. When I hover on an image, id like to have 3 or 4 lines that give a general description. By default, the images show, and when I hover id like the text to appear ~ how might I do this?
Here is the current code that I have
<div class="container">
<div class="product-item">
<img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
<div class="product-item">
<img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
</div>
</div>
.home-body .container {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
margin: 5em 0 0 0;
}
.home-body img {
margin: 5px;
transition: all 1s;
}
.home-body img:hover {
transform: scale(1.05);
transition-duration: .3s;
filter: grayscale(20%);
opacity: 90%;
cursor: pointer;
}
.product-item {
background-color: #212121;
margin: 5px;
}
And here is what I think I could do, but dont know how to implement it with html/css
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
The simplest solution would be to:
Add 4 text tags which are used for the description you mentioned and assign a class to them.
Add display: none; to the class.
Add, for instance, display: block; to :hover of your class.
HTML:
<div class="container ">
<img src="img.jpg" alt=" ">
<div class="overlay-text">
<h3>Random Title</>
<p>Random description</p>
<p>Random description</p>
<p>Random description</p>
</div
</div>
CSS:
.overlay-text {
display: none;
}
.overlay-text:hover {
display: block;
}
Additionally:
If you want your image to be the background of the div, then remove
<img src="img.jpg" alt=" ">
from your HTML and add this to your overlay-text class in CSS:
background-image: url("img.jpg");
Is this what you are looking for.
.home-body .container {
display: flex;
flex-wrap: wrap;
justify-content: center !important;
margin: 5em 0 0 0;
}
.home-body img {
margin: 5px;
transition: all 1s;
}
.home-body img:hover {
transform: scale(1.05);
transition-duration: .3s;
filter: grayscale(20%);
opacity: 90%;
cursor: pointer;
}
.product-item {
background-color: #212121;
margin: 5px;
position: relative;
}
.home-body a .hover-text {
display: none;
}
.home-body a:hover .hover-text {
display: block;
position: absolute;
text-align: center;
color: #fff;
left: 10%;
top: 50%;
}
<body class="home-body">
<div class="container">
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1587202372583-49330a15584d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555485086-b0d5d518b225?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
<div class="product-item">
<a href="products.html"><img src="https://images.unsplash.com/photo-1555404910-2c3475578b36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60 " alt=" ">
<div class="hover-text">
<h3>Gaming PC</h3>
<p>This is a gaming pc. This is a gaming pc. This is a gaming pc.</p>
</div>
</a>
</div>
</div>
</body>
I'm attempting to centre an image and div layer inside a containing div, but so far I can't get it to move from the left of the column. I've tried a few different ways but just can't get it to move. Even the margin auto trick isn't working, which I suspect is because bootstrap 4 is a flex box now.
HTML:
#user-avatar {
background: #ff4e00;
border-radius: 50%;
width: 250px;
margin-bottom: 25px;
position: relative;
}
#user img {
border-radius: 50%;
width: 250px;
transition: .5s ease;
backface-visibility: hidden;
}
#user-avatar:hover img {
cursor: pointer;
opacity: 0.3;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.middle i {
font-size: 34px;
}
#user-avatar:hover .middle {
opacity: 1;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
<div class="col-12" id="user-avatar">
<img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
<p id="username" class="text-center"><span>Howdy </span>Liane</p>
<div id="xp-bar" class="text-left">
<div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
</div>
<p id="stats" class="text-right">Level 1</p>
</div>
It's the image and the 'underlay' ('middle' div) that I need to be in the center.
Add margin-left: 50% and transform: translateX(-50%) to #user-avatar. check below link.
thank you
http://jsfiddle.net/x1hphsvb/10994/
Add Class on id="user-avatar" to mx-auto
<div class="col-12 mx-auto" id="user-avatar">
<img class="d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
https://jsfiddle.net/lalji1051/v06j8orn/9/
simply add this style - centrd now
#user-avatar {
margin: 0 auto;
}
I have a multi-item bootstrap carousel and I want to put text in certain parts of the images in this carousel. Here is a CodePen of what I have. Currently, the text will show only when the image is the first one listed. As you can see when you go right once the streamer text appears on the first image, then if you proceed to go back left the text disappears and stays only on the first image.
HTML:
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
<div class="image-content">Streamer</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
<div class="image-content">Streamer</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/673ab7/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/4caf50/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/8bc34a/000000" class="image img-thumbnail img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
CSS:
.multi-item-carousel {
width: 100%;
height: 100%;
font-size: 25px;
}
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
width: 5%;
background-image: none!important;
filter: none!important;
outline: none!important;
border: 0;
}
.container {
width: 100%;
}
.carousel {
padding: 20px 70px;
}
.image {
border: 0;
outline: none;
background: transparent;
}
.image-content {
top: 5px;
left: 21px;
position: absolute;
color: rgb(225, 225, 225);
font-size: 11px;
}
body {
background-color: transparent;
}
If you want the text to appear on certain images, you must put the div containing the the text inside of the col in which you are placing your image. Check if this is what you are trying to acheive.
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
.multi-item-carousel {
width: 850px;
height: 150px;
font-size: 25px;
}
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
}
.multi-item-carousel .carousel-inner .active.left {
left: -33%;
}
.multi-item-carousel .carousel-inner .active.right {
left: 33%;
}
.multi-item-carousel .carousel-inner .next {
left: 33%;
}
.multi-item-carousel .carousel-inner .prev {
left: -33%;
}
#media all and (transform-3d), (-webkit-transform-3d) {
.multi-item-carousel .carousel-inner > .item {
transition: 500ms ease-in-out left;
transition: 500ms ease-in-out all;
backface-visibility: visible;
transform: none!important;
}
}
.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
width: 5%;
background-image: none!important;
filter: none!important;
outline: none!important;
border: 0;
}
.container {
width: 100%;
}
.carousel {
padding: 20px 70px;
}
.image {
border: 0;
outline: none;
background: transparent;
}
.image-content {
top: 5px;
left: 21px;
position: absolute;
color: rgb(225, 225, 225);
font-size: 11px;
}
body {
background-color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide multi-item-carousel" id="theCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive">
<div class="image-content">Streamer</div>
</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive">
<div class="image-content">Streamer</div>
</div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/673ab7/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/4caf50/000000" class="image img-thumbnail img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="http://placehold.it/200x110/8bc34a/000000" class="image img-thumbnail img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
Please try using put text separate div to col-xs-4 div it will be display you content each time like:
<div class="item active">
<div class="col-xs-4">
<a href="#1">
<img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive">
</a>
<!-- here-->
<div class="image-content">Streamer</div>
<!-- -->
</div>
<!--<div class="image-content">Streamer</div>-->
</div>
I have created a grid of images with a hover effect. When you hover over the images it zooms in. It is working fine on safari but when I try it out on google chrome the images disappear when you hover over them instead of the zoom effect. I have provided my code below.
HTML :
<body>
<div class="message0">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
Wakeup And Makeup <img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
</div>
<div class="masonry">
<div class="fader0">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_113634307.jpg?3027373344113436523" />
</div>
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://vipera-nyc.myshopify.com/collections/eyeshadow"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Vipera_cae46bcd-7bd4-4ed6-ab7d-5970f5d6fa44.jpg?5440451544572147338" /></a>
</div>
</div>
<div class="fader1">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_313764047.jpg?453596164489734443" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/HelloG-5.jpg?7272790211589801407" />
</div>
<div class="fader">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/EYEScool.jpg?3027373344113436523" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_91130072.jpg?3027373344113436523" />
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Makeup-2.jpg?7468684895134417704" />
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://twitter.com/ViperaNYC"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Tweet_us_your_look.jpg?453596164489734443" /></a>
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/glosssssss_5c5c5520-ea20-4c78-8830-e633e5bb1083.jpg?1992342090983963689" />
</div>
<div class="item">
<div class="my-wrapper">
<a
href="https://vipera-nyc.myshopify.com/collections/best-selling-products">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Best_Selling_Products-3.jpg?887070778965157300" />
</a>
</div>
</div>
</div>
</body>
CSS:
.item img { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.itemkat img {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width:100%;
}
.grid {
column-count: 3;
-webkit-column-gap: -10px; /* Chrome, Safari, Opera */
-moz-column-gap: -10px; /* Firefox */
column-gap: -10px;
line-height:100%;
}
.grid-item{
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.message0
{
display:center;
font-size:30px;
}
.my-wrapper {
background-color: #f2f2f2;
}
.my-wrapper:hover img {
opacity:0.2;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
/* margin: 0%; /*makes left margin closer */
overflow: hidden;
width: 470px;
}
.item img {
max-width: 100%; /*reduces space between images */
overflow: hidden;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
overflow: hidden;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.message0 {
font-family: Brush Script MT ;
font-size:120px;
text-align:center;
color:black;
letter-spacing: 5px;
}
I have provided a fiddle. ***IT WORKS ON OTHER INTERNET BROWSERS BUT NOT GOOGLE CHROME WHICH IS THE PROBLEM****
https://jsfiddle.net/getMecoffee56/o11hmwek/1/