The common way to make different styles for different widths is by making multiple #media queries, for example:
#media(min-width:1200px){ ... }
#media(min-width:768px){ ... }
#media(min-width:576px){ ... }
#media(min-width:320px){ ... }
but using this method the rules are not exclusive, for example the rules in (min-width:768px) are applied for >1200px
I want to make them work exclusively, Any Ideas?
What I tried
max-width and min-width
#media(min-width:1200px){ ... }
#media(max-width:1199px) and (min-width:768px){ ... }
...
the problem with this method that you have the interval between 1199 and 1200px that is neglected
not all and min-width
#media(min-width:1200px){ ... }
#media not all and (min-width:1200px){ ... }
...
the problem with this method that it can be used only if you have two intervals like >=1200px and <1200px, but in my case I have many intervals
#when
#when media(min-width:1200px){ ... }
#else{ ... }
...
I found this method in some blogs but when I searched for what browsers accept it I couldn't find, it seems that it's a new query that may not be accepted by many browsers
My example
.row{
width: 95%;
margin: auto;
height: 200px;
padding: 5px;
}
.cell{
margin-bottom: 10px;
}
.img{
position: relative;
background-color: navy;
height: 100%;
}
.img:hover{
background-color: black;
z-index: 3;
transition: background-color .3s;
}
/* Only width>768px: */
.cell:nth-child(4n+1) .img, .cell:nth-child(4n+2) .img{
width: 100%;
}
.cell:nth-child(4n+1) .img:hover, .cell:nth-child(4n+2) .img:hover{
width: 200%;
transition: width .5s;
}
.cell:nth-child(4n) .img:hover, .cell:nth-child(4n-1) .img:hover{
margin-left: -100%;
transition: margin-left .5s;
}
/*
Only when there are three cells in the line, ie. width>=576px and <768
.cell:nth-child(3n+1) .img, .cell:nth-child(3n+2) .img{
width: 100%;
}
.cell:nth-child(3n+1) .img:hover, .cell:nth-child(3n+2) .img:hover{
width: 200%;
transition: width .5s;
}
.cell:nth-child(3n) .img:hover{
margin-left: -100%;
transition: margin-left .5s;
}
*/
/*
Only when there are two cells in the line, ie. width<576px
.cell:nth-child(2n+1) .img{
width: 100%;
}
.cell:nth-child(2n+1) .img:hover{
width: 200%;
transition: width .5s;
}
.cell:nth-child(2n) .img:hover{
margin-left: -100%;
transition: margin-left .5s;
}
*/
<head><link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"></head>
<body>
<div class="row">
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
<div class="cell col-6 col-sm-4 col-md-3">
<div class="img"></div>
</div>
</div>
</body>
Related
2 image appear in same time, up and down.
I want hover image display none.
Hover image is appear below primary image.
Primary image is hide when hover.
Seems like dont work. and really need help on this.
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-top" src="images/True Blue Asia.jpg"/>
<img class="card-img-top" src="images/Asia Bagus.jpg"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
<div class="card">
<img src="/image_displayed_as_default" class="hover-hidden"/>
<img src="/image_displayed_when_hover" class="hover-only"/>
</div>
.card img {
opacity: 1;
transition: opacity 200ms;
}
.card:hover img.hover-hidden,
.card:not(:hover) img.hover-only {
opacity: 0;
}
You are looking for this
Pure CSS solution
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
<img id="aks" src="http://dummyimage.com/100x100/000/fff"/>
Your code solution
Issue i you are not hide second image initially
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
.card a .card-img-below{
display: none;
}
.card a:hover .card-img-below {
display: block;
}
a{
display:block;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-above" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class="card-img-below" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
Change the image url
I'm creating a webpage with a sidebar left. And Bootstrap 4 fixed size cards in the page content.
When it is toggled at view-port size - >768px to 100's of pixels, the page content is not act as responsively (overlapped and compressed all).
Why? look #media(min-width:768px){...}.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
width: 0;
height: 100%;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar {
left: 250px;
margin-left: -250px;
}
#wrapper.toggled .sidebar {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
}
#wrapper.toggled #page-content-wrapper {
margin-right: -250px;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#wrapper .sidebar {
width: 250px;
}
#wrapper.toggled .sidebar {
width: 0;
}
#page-content-wrapper {
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="wrapper">
<div id="sidebar-wrapper" class="sidebar">
<ul>
<li>Dashboard</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<h1>Simple Sidebar</h1>
<a class="btn btn-secondary" href="#menu-toggle-left" id="menu-toggle">Toggle Left</a>
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 1</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 2</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 3</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 4</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How to correct it? Thanks.
Here's a simple solution, add style="width:100vw;" to <div class="row"></div>
<div id="wrapper">
<div id="sidebar-wrapper" class="sidebar">
...
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
...
<div class="row" style="width:100vw;">
...
</div>
</div>
</div>
I have set of images and when hovered the image will fade(whitish fade) its color. But what I want is for it to be pink (pinkish fade) with an opacity of 0.5. I can't make it change its color, what I did is just the fading (whitish fade) of image when hovered.
.img-overlay {
position: relative;
}
.img-overlay img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.img-overlay:hover img {
opacity: 0.5;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-overlay:hover .middle {
opacity: 1;
}
<div class="wrappingimages">
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
</div>
Since filters are not compatible with all the browsers, alternatively you might want to set up your image as a background and create an overlay layer, which will only display on hover. It would be something like this:
<div class="box overlay red" style="background-image: url('https://picsum.photos/200?image=187');">
<h1>Pasta</h1>
</div>
<div class="box overlay blue" style="background-image: url('https://picsum.photos/200?image=378');">
<h1>Pasta</h1>
</div>
<div class="box overlay green" style="background-image: url('https://picsum.photos/200?image=339');">
<h1>Pasta</h1>
</div>
<div class="box overlay orange" style="background-image: url('https://picsum.photos/200?image=329');">
<h1>Pasta</h1>
</div>
body {
text-align: center;
}
.box {
width:100px;
height:100px;
border:1px solid grey;
display: inline-block;
vertical-align: top;
margin-top: 10px;
background-image: url(http://lorempixel.com/output/food-q-c-100-100-10.jpg);
position: relative;
}
.overlay {
position: relative;
}
.overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: none;
z-index:0;
}
.overlay:hover:before{
display: block;
}
.red:before {
background-color: rgba(255,0,0,0.5);
}
.blue:before {
background-color: rgba(0,0,255,0.5);
}
.green:before{
background-color: rgba(0,255,0,0.5);
}
.orange:before {
background-color: rgba(255,153,0, 0.5);
}
.box * {
position: relative;
/* hack */
}
h1 {
color:white;
}
You can then play around with colors and opacity.
Check out how it would look on this codepen.
You can use a combination of different css filters to achieve the results you're looking for. I made an example by fiddling around and tweaking the numbers until it looked pinkish.
.img-overlay {
position: relative;
}
.img-overlay img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.img-overlay:hover img {
-webkit-filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%);
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img-overlay:hover .middle {
opacity: 1;
}
<div class="wrappingimages">
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%">
<div class="middle">
<div class="text">Pasta</div>
</div>
</div>
</div>
</div>
.img-overlay:hover:after img {background:pink; opacity:0.5;}
The Above image shows this is how i want to make it.I have alignment display issue and line doesn't gets displayed. how can i achieve using with bootstrap grid.I want it make responsive. please advise where i am making mistake and how can i make it happen.
plunker link
I wan to see like this
<div class="container-fluid" style="background: white;">
<div class="row">
<div class="col-lg-9 col-xs-12 ">
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">1</div>
<div class="expenseItems col-md-1 col-xs-1">Text1</div>
<div class="hrcol-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">2</div>
<div class="expenseItems col-md-2 col-xs-2">Text2</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">3</div>
<div class="expenseItems col-md-2 col-xs-2">Text3</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">4</div>
<div class="expenseItems col-md-2 col-xs-2">Text4</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
</div>
</div>
CSS
/*For drawing line*/
.hr {
color: gray;
background: gray;
width: 5px;
height: 1px;
margin-top:4px;
}
.circle
{
width: 28%;
border-radius: 100%;
text-align: center;
font-size: 14pt;
padding: 1pt;
position: relative;
background: gray;
color: white;
margin-top:11pt;
}
/*Parent div*/
.parent {
border-style: dashed;
border-width: 1px;
padding: 25px;
display:inline-block;
background-color:Aqua;
}
.child {
float: left;
background-color:Orange;
}
.expenseItems {
display: inline-block;
background-color:Green;
}
Using columns to acheive alignment inside other columns doesn't really make much sense when you can simply use a display property to do this with the content inside a column.
Use display: inline-block and remove all the nested columns.
Working Example: Open at FullPage
/*Use this rule below adjust the space between columns*/
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
/*Use the above to adjust the space between columns*/
.parent {
border: 1px dashed red;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: red;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: red;
}
.hr {
background: red;
height: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
I am trying to control some responsive images placed in a grid.
Unfortunately 2 annoying things occur when the viewport is changed in width:
The images which starts out as 4 in a row, quickly becomes 1 in a row even though there is space enough for 2-3 in the viewport.
The images are not positioned in center when 1 in a row.
HTML
<section>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2>Image test</h2>
<hr class="line-color"></hr>
</div>
</div>
<div class="row team-images">
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>John Doe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>Moe Joe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>Jimbo Joe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
<div class="col-md-3">
<div class="team-item">
<div class="team-text">
<h3>Jimmy Joe</h3>
<h4>COO</h4>
</div>
<div class="team-image-overlay"></div>
<img src="http://placehold.it/400x400" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</section>
CSS
body {
margin: 10px;
}
.team-images img {
max-height:300px;
width:auto;
}
.team-text {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
background-color:rgba(0, 0, 0, 0.4);
}
.team-text h3 {
margin-top:5px;
font-weight: 300;
margin-bottom: 0;
text-transform: none;
}
.team-text h4 {
margin-bottom:5px;
margin-top: 0;
padding-top: 0;
font-weight: 200;
font-size: 1em;
text-transform: none;
}
.team-item {
position: relative;
display:inline-block;
margin-bottom:10px;
}
.team-images .team-image-overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(41, 128, 185, 0.4);
color: #fff;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
background: rgba(24, 188, 156, 0);
}
DEMO: https://jsfiddle.net/DTcHh/7189/
On your columns, you only specified col-md-3 which will only trigger during medium to large resolutions.
You can set instead col-md-3 col-sm-3 or just col-sm-3 so it will also trigger on smaller res.
Regarding the images not positioned center, you can make it by setting text-align:center on their container.
.team-images > div {
text-align:center;
}
Working fiddle : https://jsfiddle.net/1L4fgdf5/3/
In response to your comment below, if you don't want to use scaffolding use media queries on css intead.
#media (min-width: 992px) and (max-width: 1199px) {
.team-images .col-md-3 {
width: 50%;
}
}
Working fiddle: https://jsfiddle.net/da9b30fn/