I've been trying to get the image filter change from grayscale(1) to grayscale(0) when it's selected but it doesn't work for me :( The following CSS is what I have so far.
.main-carousel img {
display: block;
height: 200px;
filter: grayscale(1);
}
.carousel-cell.is-selected .img{
filter: grayscale(0%);
}
<div class="main-carousel" data-flickity='{"percentPosition": false, "wrapAround": true}'>
<div class="carousel-cell"><img src="/images/carousel-1.jpg"></div>
<div class="carousel-cell"><img src="/images/carousel-2.jpg"></div>
<div class="carousel-cell"><img src="/images/carousel-5.jpg"></div>
<div class="carousel-cell"><img src="/images/carousel-3.jpg"></div>
<div class="carousel-cell"><img src="/images/carousel-4.jpg"></div>
<div class="carousel-cell"><img src="/images/carousel-6.jpg"></div>
</div>
I must be so tired to not able to spot this mistake :( i have an extra period in front of img tag. The correct CSS as following.
.main-carousel img {
display: block;
height: 200px;
filter: grayscale(1);
}
.carousel-cell.is-selected img{
filter: grayscale(0%);
}
Related
On Windows, with Chrome, I try to use backdrop-filter: blur and mix-blend-mode: soft-light, but every time my cursor moves on the Chrome Tabs, rectangle glitches occur at the top of the page.
I don't know how to fix it...
body {
margin: 0;
padding: 0;
}
.background {
background-color: #0000ff;
}
.blur-leftside {
width: 50vw;
height: 100vh;
backdrop-filter: blur(15px);
mix-blend-mode: soft-light;
background: #ffffff;
}
<html>
<body>
<div class="background">
<div class="blur-leftside"></div>
</div>
</body>
</html>
I want to create full screen background image within a bootstrap-grid so that it can be responsive.
I created a row and made it to 100% height so that it can fit the entire screen.
Added a 1024*768px resolution image , it perfectly appeared in background but with scroll bars.
I just want to get rid of the scroll bars so that it fit in screen. Here is my html
html,body,.container-fluid{
height:100%;
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 100vh;
}
<div class="container-fluid">
<div class="row" >
<img src="retail.jpg">
<div class="col-md-12">
</div>
</div>
</div>
Can someone help me ?
Here is something.
The picture is full screen, and the content is on bottom.
If you remove the content, the scrollbar wont appears.
Bootply: http://www.bootply.com/sFNwejI4ow
CSS:
html,body,.container-fluid{
height:100%;
}
.full{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
HTML:
<div class="container-fluid">
<div class="row full">
<img src="//placehold.it/640x480">
</div>
<div class="row">
<div class="col-md-12">
Custom content
</div>
</div>
</div>
This should by default remove both horizontal and vertical scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>
Sadly, this will also disable scrolling on page.
Alternatively, you can implement Fancy Scrolling. The scrollbar is thinner, looks better on page and has smooth scrolling.
Try this:
Here's the script: Link
Implementation:
First call the plugin on a container.
<script>
$(function() {
$( "#demo" ).customScroll();
});
</script>
Here's the CSS:
.phancy-scrollbar {
width: 5px;
border-radius: 4px;
top: 0;
position: absolute;
background: #ccc;
-moz-transition: opacity .2s;
-webkit-transition: opacity .2s;
-o-transition: opacity .2s;
-ms-transition: opacity .2s;
transition: opacity .2s;
-webkit-transition-delay: 1s;
opacity: 0;
}
.phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar {
opacity: 1;
-webkit-transition-delay: 0s;
}
.phancy-scrollbarbutton {
width: 100%;
border-radius: 4px;
top: 0;
position: absolute;
background-color: #999;
}
Hope this helps. Cheers!!
/* attributes overflow, background-size modified */
html,body,.container-fluid{
height:100%;
overflow: hidden; // -> newly added
}
.row{
height:100%;
}
img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain cover; // modified here
width: 100vw;
height: 100vh;
}
plunker demo
Elements with -webki-filter: blur(5px) are not properly printed on Chrome.
-webkit-print-color-adjust: exact doesn't help.
My Chrome version is 51.0.2704.84 (64-bit).
JsBin
Code:
body {
-webkit-print-color-adjust: exact;
}
div {
width: 200px;
height: 160px;
background: gray;
}
.blurred {
filter: blur(5px);
-webkit-filter: blur(5px);
}
<div></div>
<div class="blurred"></div>
I have an image. And i have to provide different level of opacity in different part for the same image.The part of image can be our choice. Look at the image and it tells more.
NOTE: This is a sample image only used to show an example.
Is this possible??
I think the best way would be to provide a prepared image for this usecase. Nontheless, here is one possiblilty with plain CSS:
http://jsfiddle.net/Sur7D/1/
CSS:
.image1
{
background-image: url("http://lorempixel.com/400/200/");
background-attachment: fixed;
background-position: center center;
background-size:contain;
}
.split-image
{
height: 200px;
}
.split-image > div
{
height: inherit;
width: 33.333%;
float:left;
transform: skewX(-25deg)
}
.split-image > div:nth-child(1){
opacity: 0.8;
}
.split-image > div:nth-child(2){
opacity: 0.5;
}
.split-image > div:nth-child(3){
opacity: 1;
}
HTML:
<div class="split-image">
<div class="image1"></div>
<div class="image1"></div>
<div class="image1"></div>
</div>
finally figured out the result , used both js and css together to work,
thanks guys :)
FINAL JSFIDDLE CODE
find codes below
i have made an example with using other codes, to display 'info <DIV>' to show up when mouseover on image, but i m having problem when i try to show "caption <DIV>" over the image. i have tried to add codes in the css but anything i do stops "info <DIV>" to show up :(
can some one please look into this set of code :jsfiddle
and if the "info <DIV>" can be displayed in a separate <div> it would be great help.
thanks
regards.
code html
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" class="team"/>
<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div>
<div class="caption">SYMBOL</div>
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png" alt="" class="team"/>
<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>
<div class="caption">STAR</div>
CSS code
.team , .info{
background: #151515;
height: 150px;
width: 150px;
}
.info{
background:white;
height: 50%;
width: 20%;
display:none;
position: absolute;
top: 10px;
right: 10px;
}
.team:hover + .info {
display:block; }
.team {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.team:hover {
opacity: 0.5;
}
Its unbelievable what CSS is capable of doing - but don't abuse it too much. There has been some really fancy widgets and templates I have seen done entirely in CSS (which is great) but I would suggest to be careful when you "hack" CSS vs. using javascript. IMHO this is a css hack:
.team:hover + .info {
display:block;
}
It is OK to use CSS to change the style/display of an element NESTED within that element for instance:
<div>
<a class="close" href="#">Close me</a>
</div>
When you hover over <div then a.close should show up (display: block;).
In your specific case - you are using css to change a NON-NESTED element's display. Using javascript is recommended instead of a css hack because if you ever (and most likely you will) want to enable a user to move their mouse away from the picture and hover over the caption div and highlight text, click on link... etc. you will HAVE to use javascript. CSS is limited in its capabilities and its complexity greatly increases when you use transcend beyond its intended purposes.
As such, I recommend javascript (w/ jquery or other library).
I added the caption class in the css and styled the caption.
In your code the caption would stay under the image. Then i set the position:relative and set the position of 20px from the bottom. I gave it a background-color:red in order to let you see where it is located. I also gave the caption a width of 150px as the width of the images. You used the classes team, info and caption. In order to target the mouseover function separetely in every image i created 2 different kind of classes for every image, so: team1, team2, info1, info2, caption1, caption2. If you use want to use 3 images on your webpage you'll have to add team3, info3, caption3 and so on, in your html, css and jquery function. (You can just copy and paste and rename). i added a parent div with id image that wraps every image and gives relative positioning. You can edit the code as you want.
Here is the edited HTML:
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols- Critical-icon.png" class="team1"/>
<div class="info1">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol" <BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol" <BR>"this is a symbol"<BR></div>
<div class="caption1">SYMBOL</div>
</div>
<div id="image">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols- Favourite-1-icon.png" alt="" class="team2"/>
<div class="info2">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div>
<div class="caption2">STAR</div>
</div>
Here's the edited CSS:
.team1 {
background: #151515;
height: 150px;
width: 150px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.info1{
background: white;
height: 150px;
width: 150px;
visibility:hidden;
position: absolute;
top: 10px;
right: 10px;
}
.team2{
background: #151515;
height: 150px;
width: 150px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.info2 {
background: white;
height: 150px;
width: 150px;
visibility:hidden;
position: absolute;
top: 10px;
right: 10px;
}
.team1:hover {
opacity: 0.5;
}
.team2:hover {
opacity: 0.5;
}
.caption1 {
position:relative;
background-color:red;
width:150px;
bottom:20px;
visibility:hidden;
}
.caption2 {
position:relative;
background-color:red;
width:150px;
bottom:20px;
visibility:hidden;
}
#image {
position:relative;
}
Then i added some jquery functions that you can put in the body of your html page after the other html code:
$(".team1").mouseout(function () {
$(".caption1").css("visibility","hidden");
$(".info1").css("visibility","hidden");
});
$(".team1").mouseover(function () {
$(".caption1").css("visibility","visible");
$(".info1").css("visibility","visible");
});
$(".team2").mouseout(function () {
$(".caption2").css("visibility","hidden");
$(".info2").css("visibility","hidden");
});
$(".team2").mouseover(function () {
$(".caption2").css("visibility","visible");
$(".info2").css("visibility","visible");
});
In order to use the jquery functions you have to include the jquery library in your page by inserting: <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> in the head of your HTML page, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
Here's a demo on jsfiddle
Final code
html
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.team img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.team .caption {
position: absolute;
bottom: 1px;
right: 0px;
width: 100%;
height: 25%;
display: none;
z-index: 2;
text-align: right;
color: #ffffff;
padding: 10px;
background: rgba(0, 0, 0, .75);
}
.team .caption a {
color: #ffffff;
}
</style>
<body>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.team').mouseover(function() {
$(this).find('.caption').fadeIn(100);
});
$('.team').mouseleave(function() {
$(this).find('.caption').fadeOut(100);
});
});//]]>
</script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.team').hover(function() {
$(this).find('.info').fadeIn(100);
});
$('.team').mouseleave(function() {
$(this).find('.info').fadeOut(100);
});
});//]]>
</script>
<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Critical-icon.png" >
<div class="caption">SYMBOL</div>
<div class="info">"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR>"this is a symbol"<BR></div></div>
<div class="team">
<img src="http://icons.iconarchive.com/icons/tpdkdesign.net/refresh-cl/256/Symbols-Favourite-1-icon.png">
<div class="caption">STAR</div>
<div class="info">and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR>and this is a star<BR></div></div>
</body>
css
.team {
background: #151515;
height: 150px;
width: 150px;
position: relative;
}
.info{
background:white;
height: 100%;
width: 100%;
display:none;
position:fixed;
float:right;
top: 0px;
left: 70% ;
z-index: 99;
}