I'm trying to show an icon when I hover on the card and add opacity on it but I don't want to add opacity to the icon.
Snippet:
.cardrecipe_result{
cursor: pointer;
}
.cardrecipe_result i{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
color: #90CC57;
font-size: 25px;
display: none;
}
.cardrecipe_result:hover .card:not(i){
transition: visibility 0s, opacity 0.1s linear;
border: 2px solid #57CBCC;
opacity: 0.5;
}
.cardrecipe_result:hover .card-body{
}
.cardrecipe_result:hover i{
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="row">
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_108">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">budha bowl brocoli, carottes, radis</h5>
</div>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_142">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://static.colruyt.be/culinair/Folderrecepten%201316%20+%20WM1416/linzenschotel%20met%20kerriegroenten_MR.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">riz curry, lentilles, carottes</h5>
</div>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_122">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">velouté de carottes</h5>
</div>
</div>
</div>
</div>
</div>
How can I remove the opacity on the plus icon on hover ?
Remove the extra div you are having and simply target all the elements expect the i (note the use of a space in the selector)
.cardrecipe_result{
cursor: pointer;
}
.cardrecipe_result i{
top: 50%;
left: 50%;
position: absolute;
z-index:9;
transform: translate(-50%, -50%);
color: #90CC57;
font-size: 25px;
display: none;
}
.cardrecipe_result:hover .card :not(i){
transition: visibility 0s, opacity 0.1s linear;
opacity: 0.5;
}
.cardrecipe_result:hover .card {
border: 2px solid rgba(87,203,204,0.5); /* use rgba here since it won't be affected by opacity */
}
.cardrecipe_result:hover i{
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="row">
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_108">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">budha bowl brocoli, carottes, radis</h5>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_142">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://static.colruyt.be/culinair/Folderrecepten%201316%20+%20WM1416/linzenschotel%20met%20kerriegroenten_MR.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">riz curry, lentilles, carottes</h5>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_122">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">velouté de carottes</h5>
</div>
</div>
</div>
</div>
My solution for this, would be to put icon out of card and give to icon position: absolute.
Related
I have a problem in formatting an anchor link using the transform scale attributes when hovering on it.
I have a link inside a div (that div is used to alight the link to the right), and i would like to enlarge when I hover on it. However, when i do it, it also increase the body size of the parent div, thus moving all my other elements on the page. Why that happens? As far as I know scale should not act on the size of the elements, least of all on its parent.
Can you tell me where I'm wrong. I'm quite new to html and css, so maybe i completely set up bad my code.
Thanks to anyone who can help me.
a#fonte1 {
font-size: 1rem !important;
font-weight: 300 !important;
transition: transform 0.2s ease !important;
display: inline-block !important;
}
a#fonte1:hover {
transform: scale(1.2) !important;
cursor: pointer !important;
color: rgb(13,89,253) !important;
border: 1px solid rgb(13,89,253) !important;
border-radius: 0.3rem !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="showcase border-bottom">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6 order-lg-2">
...
</div>
<div class="col-lg-6 order-lg-1 ">
<h2>[title 1]</h2>
<p class="mb-0" style = "text-align: justify">
...
</p>
<div style="text-align:right;">
<a id="fonte1" href="#">
Link
</a>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 ">
...
</div>
<div class="col-lg-6 ">
<h2>[title 2]</h2>
<p class="mb-0" style = "text-align: justify">
...
</p>
</div>
</div>
</div>
</section>
You are adding a border on hover which changes the size of the element. Add a transparent border on the base state and change its color on hover.
a#fonte1 {
font-size: 1rem;
font-weight: 300;
transition: transform 0.2s ease;
display: inline-block;
border: 1px solid transparent;
}
a#fonte1:hover {
transform: scale(1.2);
cursor: pointer;
color: rgb(13, 89, 253);
border: 1px solid rgb(13, 89, 253);
border-radius: 0.3rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<section class="showcase border-bottom">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-lg-6 order-lg-2">
...
</div>
<div class="col-lg-6 order-lg-1 ">
<h2>[title 1]</h2>
<p class="mb-0" style="text-align: justify">
...
</p>
<div style="text-align:right;">
<a id="fonte1" href="#">
Link
</a>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-6 ">
...
</div>
<div class="col-lg-6 ">
<h2>[title 2]</h2>
<p class="mb-0" style="text-align: justify">
...
</p>
</div>
</div>
</div>
</section>
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
I am having some trouble with some of my bootstrap cards overlapping my navbar. I made sure that none of my positions were absolute and that the z indexes were handled properly, but I still get the same issue. doing padding-top on the body did not give me the result I wanted either. Here are some before and after pictures.
#top {
top: 0;
position: fixed;
z-index: 1;
}
.topbar {
height: 90px;
background-color: #24414e;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
}
#keyframes greeting {
0% {
background: url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60% {
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo {
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder {
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out {
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover {
text-decoration: underline;
}
.menu {
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon {
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt {
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide {
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1:hover~.txt-1 {
visibility: visible;
}
.icon-2:hover~.txt-2 {
visibility: visible;
}
.icon-3:hover~.txt-3 {
visibility: visible;
}
.icon-4:hover~.txt-4 {
visibility: visible;
}
.icon-5:hover~.txt-5 {
visibility: visible;
}
.icon-6:hover~.txt-6 {
visibility: visible;
}
.icon:hover {
color: #ffffff;
}
.rest {
height: 100%;
}
.contacts {
position: relative;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="templatestyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id="top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id="openMenu">
<div class="row">
<div class="col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class="txt txt-1">Dashboard</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class="txt txt-2">Profile</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class="txt txt-3">Certificates</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class="txt txt-4">Send/Apply</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class="txt txt-5">Settings</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class="txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class="rest container-fluid">
<h2 class="text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class="row contacts">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 1</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 2</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 3</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 4</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 5</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 6</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 7</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
This is a simple fix, just set your Header z-index: 2; and your cards z-index: 1;.
I didn't really go over your code but setting the header an higher z-index as the content for sure will fix it.
The answer is you have given position:fixed to the header(.top) to fix it at the top with top:0, so you must need to give margin-top to the section next to it containing classes class="rest container-fluid" otherwise it will overlap as it seems with absolute positioned element.
Setting margin:top:159px fix the issue.
Please note that 159px is top header's height here. Happy coding :)
Use the fixed-top class instead of the top CSS code. And add 160px padding-top for the body.
/*
The headers height is 159.5px
*/
body {
padding-top: 160px;
}
fixed-top removes the element that you use it for, from the normal flow of the content, and, hence, the element will overlay the other content
To fix the issue, you need to push down the main content equal or larger than the height of the fixed-top element. You can do so by setting the padding-top of the body equal or larger than the fixed-top element's height. For example, if the fixed-top element's height is 72px, padding-top of body should be, at least, 72px. If you wish, you can use relative units: padding-top: 4.5rem; instead of padding-top: 72px;.
body {
padding-top: 72px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="fixed-top bg-light">
<div>
<noscript>
<h1 style="color:#FF0000;">
This reportFile will not be navigable without Javascript, please enabled Javascript
</h1>
</noscript>
<img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px" class="mb-2">
</div>
<header>
<h2 class="subheading" title="Start Fixing Songs">
<a class="mx-2">
Fix Songs
</a>
</h2>
</header>
</div>
<main class="container-fluid bg-primary bd-">
<div class="row">
<div class="col py-5">Hello</div>
</div>
</main>
This is what both bootstrap-3 and bootstrap-4 has done. I recommend you to inspect it yourself.
You may find these two link useful.
w3schools - How to - fixed menu
teamtreehouse - div hiddne below fixed position navbar
A codepen of your work
In my code, the overflow-y: scroll property set under the "Online Contacts" section does not seem to be working. What's weirder is that when the position is absolute and I delete the "Reminders" header or I shift the header up, It does seem to work. I can't figure out what is causing this bug (Note: I am using Bootstrap 4 in this project).
Here is the code: https://jsfiddle.net/hdesh7/rL43unfj/1/
HTML:
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="dashboardstyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id = "top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id = "openMenu">
<div class="row">
<div class = "col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class = "txt txt-1">Dashboard</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class = "txt txt-2">Profile</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class = "txt txt-3">Certificates</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class = "txt txt-4">Send/Apply</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class = "txt txt-5">Settings</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class = "txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class = "rest container">
<h2 class = "text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class = "row contact">
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 1</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 2</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 3</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 4</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 5</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 6</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 7</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
</div>
<h4 class = "remind">Reminders:</h4>
</section>
<section class = "rest container">
</section>
</body>
CSS:
html{
overflow-y: scroll;
}
#top{
top: 0;
position: sticky;
z-index: 1;
}
.topbar{
height: 90px;
background-color: #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
/*
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
*/
}
#keyframes greeting{
0%{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60%{
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo{
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder{
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out{
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover{
text-decoration: underline;
}
.menu{
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon{
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt{
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide{
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1{
color: #ffffff;
}
.txt-1{
visibility: visible;
animation-name: iconSlide;
animation-duration: 1s;
}
.icon-1:hover ~ .txt-1{
visibility: visible;
}
.icon-2:hover ~ .txt-2{
visibility: visible;
}
.icon-3:hover ~ .txt-3{
visibility: visible;
}
.icon-4:hover ~ .txt-4{
visibility: visible;
}
.icon-5:hover ~ .txt-5{
visibility: visible;
}
.icon-6:hover ~ .txt-6{
visibility: visible;
}
.icon:hover{
color: #ffffff;
}
.rest{
height: 100%;
z-index: -1;
position: relative;
}
.contact{
height: 100px;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #24414e;
overflow-y: auto;
position: relative;
}
.card{
margin-top: 10px;
margin-bottom: 10px;
}
.remind{
margin-top: 20px;
}
The issue is caused by z-index: -1 in the .rest class (applied to the section element).
If you remove it works correctly
There is an element with a higher z-index value that is preventing you from scrolling. Namely .rest has z-index: -1.
Switch up your z-index values and make this scrollable container have a higher z-index
Currently I have a 3 column grid setup with images and a text overlay. The way I am achieving the effect is setting the grid underneath to blue and just decreasing the opacity of the img so it turns slightly blue so that the text above it will remain full opacity.
The problem I am running into is that whenever I hover over a image for the first time you will see a small flicker before the overlay completes but whenever I go back to hover over it again it is working fine.
I have tried switching where the hover is applied to no avail as well. I've tested on multiple browsers and they all seem to have the same issue, what could be causing this?
Here is a Codepen as well as a snippet below demonstrating the problem I am using pure css.
a {
transition: all 200ms;
color: #36C;
}
.no-padding {
padding: 0
}
#masonry-grid figure {
background: #36C;
}
#masonry-grid h1 {
position: absolute;
color: #FFF;
border: 0;
margin: 0;
padding: 0;
top: 85%;
left: 10px;
z-index: 1000;
width: 93%;
font-size: 1.5em;
text-shadow: 1px 1px 1px #333;
text-align: center;
}
#masonry-grid figure h1 {
transition: .3s;
}
#masonry-grid figure:hover h1 {
color: #FFF;
text-shadow: 1px 1px 1px #000;
}
#masonry-grid figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#masonry-grid figure:hover img {
opacity: .5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="masonry-grid" class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/office-school">
<figure>
<h1>Office & School Supplies <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/1_office-school.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/baopals-health">
<figure>
<h1>Health & Well-Being <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/2_health-wellness.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/household-essentials">
<figure>
<h1>Household Essentials <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/3_household-essentials.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/culture-gifts-instruments">
<figure>
<h1>Musical Instruments <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/4_music.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/b-3249277-NBA">
<figure>
<h1>Official NBA Gear <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/5_nba.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/moto-bikes-scooters">
<figure>
<h1>Scooters <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/6_scooters.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/mens-grooming">
<figure>
<h1>Men's Grooming <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/7_mens-grooming.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/toys-kids-baby">
<figure>
<h1>Toys, Kids & Baby <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/8_toy-kids-baby.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding masonry">
<a href="/category/womens-beauty">
<figure>
<h1>Women's Beauty <i class="fa fa-caret-right"></i></h1>
<img src="/catalog/view/theme/lexus_megashop/image/mosaic/9_womens-beauty.jpg" class="img-responsive" alt="">
</figure>
</a>
</div>
</div>
</div>
Try adding -webkit-backface-visibility: hidden; to the img element:
#masonry-grid figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: opacity .3s ease;
-webkit-backface-visibility: hidden;
}
Updated Codepen: http://codepen.io/anon/pen/zrLQPa
UPDATE
An alternate solution.
Instead of manipulating the image itself, have you considered using a pseudo element on the images parent figure element?
#masonry-grid figure::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #36C;
opacity: 0;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
#masonry-grid figure:hover::before {
opacity: .5;
}
New Codepen: http://codepen.io/anon/pen/gPjJJM