here is my problem, I have successfully encoded my bootstrap cards as I wish, but a small details grieves me.
I would like to make sure that the buttons 'infos' and 'mods' are not taken into account by "transform scale"
Only I can scratch my head and try all sorts of things I can not get out of this pass.
Here is the CSS & HTML code.
<div class="card-deck row">
<div class="col-3"><!--event serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse event serv">
<h5>Special event</h5><p class="lead">PVP / PVE</p>
Infos
Mods
</div>
</div>
</div>
</div><!--/event serv-->
<div class="col-6"><!--island serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse island serv">
<h5>The island</h5><p class="lead">PVE x 3</p>
Infos
Mods
</div>
</div>
</div>
</div><!--/island serv-->
<div class="col-3"><!--scorched serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse scorched serv">
<h5>Scorched earth</h5><p class="lead">PVE x 3</p>
Infos
Mods
</div>
</div>
</div>
</div><!--/scorched serv-->
</div>
CSS:
.event{background-image: url(https://images2.alphacoders.com/819/819763.jpg);background-size:cover;background-position: center;}
.island{
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
background-size:cover;
background-position: center;
}
.scorched{
background-image: url(https://images4.alphacoders.com/819/819770.jpg);
background-size:cover;
background-position: center;}
.card{overflow:hidden;}
.serv{position:relative;}
.serv:hover{transform:scale(1.1);transition:all 0.7s;}
Someone know where my problem comes from? thank you very much !
If you just want the image to scale, move the background to an ::after pseudo element of .serv, give the pseudo element a negative z-index so it's behind the text, position the pseudo element absolutely, move the transition to .serv::after instead of only on the :hover pseudo class of .serv, and fire transform: scale() on .serv::after instead of .serv.
.event::after {
background-image: url(https://images2.alphacoders.com/819/819763.jpg);
background-size: cover;
background-position: center;
}
.island::after {
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
background-size: cover;
background-position: center;
}
.scorched::after {
background-image: url(https://images4.alphacoders.com/819/819770.jpg);
background-size: cover;
background-position: center;
}
.card {
overflow: hidden;
}
.serv {
position: relative;
}
.serv::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
transition: transform 0.7s;
}
.serv:hover::after {
transform: scale(1.1);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck row">
<div class="col-3">
<!--event serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse event serv">
<h5>Special event</h5>
<p class="lead">PVP / PVE</p>
Infos
Mods
</div>
</div>
</div>
</div>
<!--/event serv-->
<div class="col-6">
<!--island serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse island serv">
<h5>The island</h5>
<p class="lead">PVE x 3</p>
Infos
Mods
</div>
</div>
</div>
</div>
<!--/island serv-->
<div class="col-3">
<!--scorched serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse scorched serv">
<h5>Scorched earth</h5>
<p class="lead">PVE x 3</p>
Infos
Mods
</div>
</div>
</div>
</div>
<!--/scorched serv-->
</div>
</div>
Or if you're using bootstrap 4, give .serv a z-index so it's above .card.bg-inverse since that will assign a dark background color and cover the .serv::after background image.
.event::after {
background-image: url(https://images2.alphacoders.com/819/819763.jpg);
background-size: cover;
background-position: center;
}
.island::after {
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/3b/91/6b/3b916b8b33b7aa08bf8fb920be2aa536.jpg);
background-size: cover;
background-position: center;
}
.scorched::after {
background-image: url(https://images4.alphacoders.com/819/819770.jpg);
background-size: cover;
background-position: center;
}
.card {
overflow: hidden;
}
.serv {
position: relative;
z-index: 1;
}
.serv::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: -1;
transition: transform 0.7s;
}
.serv:hover::after {
transform: scale(1.1);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-deck row">
<div class="col-3">
<!--event serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse event serv">
<h5>Special event</h5>
<p class="lead">PVP / PVE</p>
Infos
Mods
</div>
</div>
</div>
</div>
<!--/event serv-->
<div class="col-6">
<!--island serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse island serv">
<h5>The island</h5>
<p class="lead">PVE x 3</p>
Infos
Mods
</div>
</div>
</div>
</div>
<!--/island serv-->
<div class="col-3">
<!--scorched serv-->
<div class="card">
<div class="card bg-inverse">
<div class="card-block card-inverse scorched serv">
<h5>Scorched earth</h5>
<p class="lead">PVE x 3</p>
Infos
Mods
</div>
</div>
</div>
</div>
<!--/scorched serv-->
</div>
</div>
https://www.w3schools.com/css/css_pseudo_classes.asp
Use :not(a) in .serv for translation. That should work.
Related
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3 " style="width: 60%;">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
I have a problem with alignment text and icon. Look at screenshot
I've already tried to use vertical-align: middle and baseline. Maybe somebody can resolve my problem.
Here I have aligned it vertically and horizontally.
.container-fluid{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 60%;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
Thanks and best regards!
I really appreciate your work, but I was asking to align icon and text in one line not the whole container on web page.
Check this image
Finally I coped with that. Here is my solution:
.align-inline {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container-fluid" >
<section id="current-weather">
<div class="card text-center text-white bg-dark mb-3">
<div class="card-header">
weather
</div>
<div class="card-body">
<h2>{{location}}</h2>
<hr style="width: 30%;height: 2px; margin: 20px auto 20px auto;color: black;">
<h5 class="card-title align-inline"><i class="wi wi-owm-{{weather_current['weather'][0]['id']}}" style="font-size: 2.2em;"></i>{{weather_current['temp']}}°C</h5>
</div>
</div>
</section>
</div>
This is how result looks like
I have a row of images that for some reason aren't aligning vertically. If I use all the same images, it looks fine, but if I replace with a different image with slightly different dimensions it doesn't work. Here's an example below:
Here's my HTML code..note I am using some custom CSS for an overlay, not sure if that could be causing a problem
<div className="container">
<div className="row">
<div className="col-xl-12 mx-auto mb-3">
<h2 className="abouthead">Portfolio</h2>
</div>
</div>
<div className="row">
<div className="col-lg-4 col-md-12 mb-4">
<div
className="view overlay hm-black-strong"
data-toggle="modal"
data-target="#modal1"
>
<img
src="http://localhost:3002/images/dealmazing.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">Deals Website</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-12 mb-4">
<div
className="view overlay hm-black-strong"
data-toggle="modal"
data-target="#modal2"
>
<img
src="http://localhost:3002/images/crypto-portal.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">
Cryptocurrency Portal
</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-12 mb-4">
<div className="view overlay hm-black-strong">
<img
src="http://localhost:3002/images/dealmazing.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">Deals Website</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
</div>
//CSS
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
#import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css);
.hm-gradient {
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
color: #2E2E2E;
}
Have you tried specifying a height for your image? And then apply Object-Fit CSS property.
img {
object-fit: cover;
width: 400px;
height: 400px;
}
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
I've been trying to set the background image of my outer container by having the image transition into the background of my website. But nothing displays, is there something im missing in the css that would allow me to display the background image?
Pen: https://codepen.io/chriskaram/pen/BwVXGq
Page: https://mydietgoal.com/mydietgoal-features-and-plans/
<div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content;">
<div class="container container1">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-green">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$4.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container2">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-blue">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$9.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container3">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-orange">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$4.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This block of code
#btn1:hover + .outer-container {
background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
means when #btn is :hover, the next direct sibling with .outer-container gets background-image.
However, according to your code, .outer-container is the grand grand grand grand grand grand grand grandparent of #btn. So it will not work.
Bad news is, CSS has no way to select ancestors.
So I suggest you use JavaScript to do it.
Working Example
CSS only allows descendant and sibling selectors, it does not support applying styles to a parent. https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
To achieve this effect, you would want a div at the same level as the button with the hover trigger that is positioned, fixed or absolute (you will need to change your markup to support absolute)
Here is an example:
.bg,
.bg2 {
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 100%;
z-index: -1;
}
#btn1:hover + .bg,
.bg2 {
background-image: url(https://static1.squarespace.com/static/59a7820e2994ca11766093d3/t/59dbd720f5e2317170edb5bf/1507579681913/vegetables-fresh-healthy-food-my-diet-goal-hd.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
transition: opacity 0.5s;
}
.bg2 {
opacity: 0;
}
#btn2:hover ~ .bg2 {
opacity: 1;
}
I also added an opacity transform for the second button as I feel it is less jarring.
https://codepen.io/jaylandro/pen/qPypmb
I have a below HTML code in which the images are purely responsive.
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/slide_1.jpg); width:100%;" border="0" alt="Null">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<p>Get started</p>
</div>
</div>
</div>
</li>
</ul>
</div>
In this, the slide_1.jpg image is responsive. What I want is, I want to replace this image with my actual Image.
I tried changing the image by giving width:100% but the Image was still getting stretched. Any idea, how to make that image responsive.
Update
and the css is below
#fh5co-hero .flexslider .slider-text > .slider-text-inner {
display: table-cell;
vertical-align: middle;
min-height: 700px;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 70px;
font-weight: 400;
color: #fff;
}
#media screen and (max-width: 768px) {
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
font-size: 40px;
}
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead {
font-size: 20px;
color: #fff;
}
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(/images/slide_1.jpg);">
<div class="overlay-gradient"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Start Your Startup With This Template</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_3.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>Take Your Business To The Next Level</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
<li style="background-image: url(images/slide_2.jpg);">
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>We Think Different That Others Can't</h2>
<!--<p>Get started</p>-->
</div>
</div>
</div>
</li>
</ul>
</div>
If you change only the width to 100% it will stretch the image inside of it. Try adding height:auto; to the inline CSS in order for the image to scale correctly.
If that doesn't work, try replacing your background-image property with:
background: url(images/slide_1.jpg) no-repeat center center;
background-size: cover;