There are 4 texts. When I hover on each of them I can see a certain picture which belongs to certain text.
The question is that, I need a slider consist of images. I mean when I hover on text1 I need to see my image and after one second this image has to disappear.
So, I need to do it with all texts, but in my code I just can see one image, apart from it is not a slider. Can you help me in this question?
This is the code:
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<div class="pic" style="border-radius: 20px;"></div>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>
This would not be like a slider but inside of pic div we can change images when Texts are hovered.
I assume that we have all the required images in folder img/src-img and img folder is in the same directory where the html page exists.
Below code is working fine in Chrome
.pic {
background-image: url(img/scr-img/1.png);
width: 236px;
height: 420px;
transition: 1s;
background-size: cover;
}
p1:hover~.pic {
background-image: url(img/scr-img/8.png);
}
p2:hover~.pic {
background-image: url(img/scr-img/9.png);
}
p3:hover~.pic {
background-image: url(img/scr-img/11.png);
}
p4:hover~.pic {
background-image: url(img/scr-img/5.png);
}
<p1 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text1</p>
</div>
</div>
</p1>
<p2 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text2</p><br><br><br>
</div>
</div>
</p2>
<p3 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center xs-mb50 xs-font wow fadeIn">
<p>Text3</p>
</div>
</div>
</p3>
<p4 style="cursor: pointer; font-size: 24px; color: #1A264A;">
<div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4 col-sm-6 col-xs-12">
<div class="download-content sm-center xs-center wow fadeIn">
<p>Text4</p>
</div>
</div>
</p4>
<div class="pic" style="border-radius: 20px;"></div>
Related
I have product layout page. Products will be displayed on this page, along with a picture, person's name, title, and description. However, all of those image, title, and description will have the same link, while the person name will have a separate link.
The problem is when i add "href" to the whole div, it also cover the person name and it work as the single link.
How can i make it cover for the whole product card with one link and, only person name for the another link.
By inspecting the first and second product cards, you may execute the code and locate my current problem.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #CCC;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group">
</div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg" alt="" />
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
</a>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img class="img-id" src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png" alt="" />
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
Please check the second card which I updated
It's not a good practice to wrap a div with a tag since div is a block element though it will work. So you can simply add a onclick event to direct to a link and add a cursor pointer styling to let your audience is aware of the link and then wrap the name tag with an tag with another link.
.person {
position: relative;
top: 5px;
left: 10px;
color: #000000;
font-family: "Arial";
font-size: 15px;
margin-bottom: -20px;
}
.well {
background: transparent;
border-style: none;
}
.item {
width: 250px !important;
padding: 0;
margin-top: 50px;
margin: 19px;
box-shadow: 1px 5px 15px #ccc;
}
.col-md-3:hover {
box-shadow: 1px 5px 25px #ccc;
}
.thumbnail {
margin-bottom: 0px;
padding: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.p-title {
margin-top: 10px;
font-weight: bolder;
font-family: "Arial";
font-size: 16px;
}
.lead {
position: relative;
font-family: "Arial";
font-size: 15px;
margin-bottom: 25px;
}
.img-id {
object-fit: cover !important;
object-position: center;
height: 250px !important;
width: 100% !important;
}
#card-2 {
cursor: pointer;
}
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/><link rel="stylesheet" href="./style.css" />
<!-- partial:index.partial.html -->
<div class="container">
<div class="well well-sm">
<div id="view" class="btn-group"></div>
<div id="products" class="row list-group">
<!-- Single product -->
<a href="https://www.youtube.com/">
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg"
alt=""
/>
<a href="https://www.linkedin.com/">
<div class="person">
<p class="person-name">Person Name</p>
</div>
</a>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
</a>
<!-- end Single product -->
<div
id="card-2"
class="item col-xs-4 col-md-3"
onclick="window.location='https://www.youtube.com'"
>
<div class="thumbnail">
<img
class="img-id"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Mona_Lisa-restored.jpg/1200px-Mona_Lisa-restored.jpg"
alt=""
/>
<div class="person">
<a href="https://www.linkedin.com/">
<p class="person-name">Person Name</p>
</a>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-md-3">
<div class="thumbnail">
<img
class="img-id"
src="http://res.cloudinary.com/dnhwxgf8i/image/upload/c_scale,h_250,w_400/v1520528305/table_n1bjhv.png"
alt=""
/>
<div class="person">
<p class="person-name">Person Name</p>
</div>
<div class="caption">
<p class="p-title">
Old used box
</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
Description
</p>
</div>
</div>
</div>
</div>
</div>
<!-- partial:index.partial.html -->
</div>
</div>
</div>
I am using a background image and an overlay in my div. But the overlay doesn't overlap properly. It is leaving some margins at both the sides for reasons. I tried setting margins so that it overlaps completely but then it disturbs my layout.
How can i correct it?
/*numscroller*/
.image{
height:auto;
width:100%;
background:#FFCC99;
}
.over2{
height:auto;
width:100%;
background-color:rgba(0,0,0, 0.7);
}
.num{
margin:auto;
padding:6rem 0rem;
float:left;
}
<script src="https://raw.githubusercontent.com/tinywall/numscroller/master/numscroller-1.0.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row " >
<div class="col-12 image">
<div class="over2">
<div class="row justify-content-around">
<div class=" num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3">
<center>
<h3><b>Slums covered</b></h3>
<h3 class='numscroller' data-min='1' data-max='7' data-delay='1' data-increment='1'><b>7</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Lives changed</b></h3>
<h3 class='numscroller' data-min='1' data-max='400' data-delay='1' data-increment='3'><b>400</b></h3>
</center>
</div><!--num col-10 ends-->
<div class="num col-10 col-sm-4 col-md-3 col-lg-3 col-xl-3 ">
<center>
<h3><b>Our supporters</b></h3>
<h3 class='numscroller' data-min='1' data-max='30' data-delay='1' data-increment='1'><b>30</b></h3>
</center>
</div><!--num col-10 ends-->
</div><!--row justify ends-->
</div><!--over ends-->
</div><!--col-12 ends-->
</div><!--row ends-->
</div>
you can position the image container relatively, and the overlay should be position absolutely.
.image {
position: relative;
height: 100px;
width: 100%;
background: red;
}
.overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,.3);
display: flex;
justify-content: center;
align-items: center;
}
<div class="image">
<span>I am the image </span>
<div class="overlay">
I am the overlay
</div>
</div>
I have a simple jQuery filter set up. I'm trying to reset the active class to cat-sun, instead of cat-all. I've changed up the jQuery to assign the active class to cat-sun, instead of cat-all. I'm missing something somewhere because it's not working.
var filterActive;
function filterCategory(category) {
if (filterActive != category) {
// reset results list
$('.filter-cat-results .f-cat').removeClass('active');
// elements to be filtered
$('.filter-cat-results .f-cat')
.filter('[data-cat="' + category + '"]')
.addClass('active');
// reset active filter
filterActive = category;
$('.filtering button').removeClass('active');
}
}
$('.f-cat').addClass('active');
$('.filtering button').click(function() {
if ($(this).hasClass('cat-sun')) {
$('.filter-cat-results .f-cat').addClass('active');
filterActive = 'cat-sun';
$('.filtering button').removeClass('active');
} else {
filterCategory($(this).attr('data-cat'));
}
$(this).addClass('active');
});
button {
padding: 1em;
border: 0;
margin: 0 .5em .5em -10px;
color: #fff;
cursor: pointer;
outline: none;
}
button.cat-sun {
background: #ff4136;
}
button.cat-sun:hover {
background: #e90d00;
}
button.cat-mon {
background: #2ecc40;
}
button.cat-mon:hover {
background: #208e2c;
}
button.cat-tue {
background: #0074d9;
}
button.cat-tue:hover {
background: #004b8d;
}
button.cat-wed {
background: magenta;
}
button.cat-wed:hover {
background: darkmagenta;
}
button.cat-all {
background: #333;
}
button.cat-all:hover {
background: #0d0d0d;
}
.f-cat {
color: #fff;
padding: 1em;
border: 5px solid #fff;
}
.cat-sun {
background: #ff4136;
}
.cat-mon {
background: #2ecc40;
}
.cat-tue {
background: #0074d9;
}
.cat-wed {
background: magenta;
}
.row .col {
opacity: 0;
display: none;
}
.row .col.active {
opacity: 1;
display: block;
-webkit-animation: fadeIn 0.65s ease forwards;
animation: fadeIn 0.65s ease forwards;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h2>jQuery Button Filtering</h2>
</div>
</div>
<div class="container filtering">
<ul class="nav nav-pills nav-filter-cat">
<li><button class="cat-all" data-cat="cat-all">All Days</button></li>
<li><button class="cat-sun active" data-cat="cat-sun">Sunday</button></li>
<li><button class="cat-mon" data-cat="cat-mon">Monday</button></li>
<li><button class="cat-tue" data-cat="cat-tue">Tuesday</button></li>
<li><button class="cat-wed" data-cat="cat-wed">Wednesday</button></li>
</ul>
<div class="row filter-cat-results">
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
</div>
</div>
You were setting all the ".f cat" elements "active". So all the elements are showing up by default. And also I don't understand the reason behind "if else" block in your click handler Here is the modified code. Hope this serves your purpose.
var filterActive;
var _defaultFilter = "cat-sun";
function filterCategory(category) {
if (filterActive != category) {
// reset results list
$('.filter-cat-results .f-cat').removeClass('active');
// elements to be filtered
if( category == "cat-all") {
$('.filter-cat-results .f-cat').addClass("active");
} else {
$('.filter-cat-results .f-cat')
.filter('[data-cat="' + category + '"]')
.addClass('active');
}
// reset active filter
filterActive = category;
$('.filtering button').removeClass('active');
}
}
//$('.f-cat').addClass('active');
$(".f-cat[data-cat="+_defaultFilter+"]").addClass('active');
filterActive = _defaultFilter;
$('.filtering button').click(function() {
filterCategory($(this).attr('data-cat'));
$(this).addClass('active');
});
button {
padding: 1em;
border: 0;
margin: 0 .5em .5em -10px;
color: #fff;
cursor: pointer;
outline: none;
}
button.cat-sun {
background: #ff4136;
}
button.cat-sun:hover {
background: #e90d00;
}
button.cat-mon {
background: #2ecc40;
}
button.cat-mon:hover {
background: #208e2c;
}
button.cat-tue {
background: #0074d9;
}
button.cat-tue:hover {
background: #004b8d;
}
button.cat-wed {
background: magenta;
}
button.cat-wed:hover {
background: darkmagenta;
}
button.cat-all {
background: #333;
}
button.cat-all:hover {
background: #0d0d0d;
}
.f-cat {
color: #fff;
padding: 1em;
border: 5px solid #fff;
}
.cat-sun {
background: #ff4136;
}
.cat-mon {
background: #2ecc40;
}
.cat-tue {
background: #0074d9;
}
.cat-wed {
background: magenta;
}
.row .col {
opacity: 0;
display: none;
}
.row .col.active {
opacity: 1;
display: block;
-webkit-animation: fadeIn 0.65s ease forwards;
animation: fadeIn 0.65s ease forwards;
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<h2>jQuery Button Filtering</h2>
</div>
</div>
<div class="container filtering">
<ul class="nav nav-pills nav-filter-cat">
<li><button class="cat-all" data-cat="cat-all">All Days</button></li>
<li><button class="cat-sun active" data-cat="cat-sun">Sunday</button></li>
<li><button class="cat-mon" data-cat="cat-mon">Monday</button></li>
<li><button class="cat-tue" data-cat="cat-tue">Tuesday</button></li>
<li><button class="cat-wed" data-cat="cat-wed">Wednesday</button></li>
</ul>
<div class="row filter-cat-results">
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-mon" data-cat="cat-mon">Monday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-sun" data-cat="cat-sun">Sunday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-tue" data-cat="cat-tue">Tuesday</div>
<div class="col col-md-3 col-xs-6 f-cat cat-wed" data-cat="cat-wed">Wednesday</div>
</div>
</div>
I'm new when using reactjs, I quite confused as why the image doesn't show up in my code. I'm using background: url() so it easier for me to process. I can succesfully add the image since there is no error in console but nothing show up. can someone help me to solve this?
this is my component code:
import React from "react";
// CSS
import './klien.css'
const Klien = () => {
return (
<div className="klien">
<div className="klien-container">
<p className="section-title">Klien Kita</p>
<div id="klien" className="carousel slide" data-ride="carousel">
<div className="carousel-item active">
<div className="row text-center mr-auto ml-auto">
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size-1"></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"../../../assets/background/slide-4.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://upload.wikimedia.org/wikipedia/en/thumb/1/12/Grab_%28application%29_logo.svg/800px-Grab_%28application%29_logo.svg.png"})`}}></div>
</div>
</div>
</div>
</div>
<div className="carousel-item">
<div className="row text-center">
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
<div className="col-6 col-sm-6 col-md-3 col-lg-3 card-center card-size">
<div className="mb-3">
<div className="img-size" style={{ backgroundImage: `url(${"https://imgee.s3.amazonaws.com/imgee/638b26370a794db38dfef92fa2bfe60f.png"})`}}></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Klien;
this is my css:
.klien{
background-color: #f6f7fd;
min-height: 50vh;
max-height: 70vh;
overflow: hidden;
}
.klien .klien-container{
/* overflow: hidden; */
padding-top: 10vh;
}
.klien .section-title{
color: #1c2331;
font-size: 3em;
font-weight: 500;
text-align: center;
}
.klien .card-center{
margin: 0% auto;
}
.klien .text-center{
text-align: center;
width: 100vw;
}
.klien .card-size{
max-height: 20vh;
}
.klien .mask{
background-color: rgba(246, 247, 253, 0.5);
}
.klien .img-size{
width: 10vw;
height: 10vh;
margin: 0 auto;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.klien .img-size-1{
background: url(../../../assets/client/al-bayan.png);
width: 100px;
height: auto;
}
.design-pakaian .btn-center{
margin-left: auto;
margin-right: auto;
}
you can see that in my code there is 2 ways to call the image first I'm using inline as you can see, I successfully call the image when using external resource url but I'm failed when tried to call it from my assets folder, can someone help me to solve this?
this is what I got right now:
You can try this
<div className="img-size" style={{ backgroundImage: `url(${"/assets/background/slide-4.png"})`}}></div>
or using process.env.PUBLIC_URL as in this doc mention
<div className="img-size" style={{ backgroundImage: `url(${"process.env.PUBLIC_URL/assets/background/slide-4.png"})`}}></div>
I think the most likely cause is that the image isn't available at that path once your app gets bundled. If you used CRA (Create React App) to start your project place the image file in your public/assets/client/al-bayan.png folder and update the path to url(/assets/client/al-bayan.png);
I am having a issue with Bootstrap in Firefox. My columns are set correctly in Chrome, Opera and Safari, but not in Firefox.
I created ten boxes distributed in two rows. Five in each row. These boxes has classes .col-sm-2 and .col-xs-10, besides a class called .categoria.
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/corneta.png" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/contribua.png" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/nota.png" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/parceiros.png" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/projetos.png" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/historico.png" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/objetivos.png" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/relatorios.png" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/diretoria.png" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/estatuto.png" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
In Chrome, Opera and Safari, they appear correctly:
Screenshoot from Chrome
But in Firefox, it is completely irregular.
Screeshoot from Firefox
Note that I am using JQuery to set these boxes max-height so they will never have the height bigger than the width. I using the following code:
$(document).ready( function(){
var columnWidth = $('.categoria').innerWidth();
$('.categoria').css('max-height', columnWidth);
});
And here is the css:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: table;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
To be honest, I am not even sure if it is a problem with Bootstrap. But I don't know what else could be.
Ok so you should change display to table only when you don't want to show image :) that seems to resolve issue with uneven heights
CSS:
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: block;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
#media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
display:table;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
HTML :
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
Fiddle
Try to use a constant value instead of a variable and intead of max-height property use height.
$(document).ready( function(){
// This value v
var columnWidth = $('.categoria').innerWidth();
columnWith = constant;
// This also change
$('.categoria').css('height', columnWidth);
});
If this doesn't change anything check all your tags matches. I can't tell you how many times it has happened to me when I don't close tags.
Hope I help.