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>
Related
I’m trying to make an hover effect with an image that increase the size but it doesn’t react everywhere. For other words, how do increase the Hitbox for a image without it actually expanding
Ok, first of all. I tried to use different kinds of scaling, margin, padding, etc. but I just don’t have enough experience
You can set the width and height of the image by doing this into your css file :
your class / attriute{
width:50px;
height:50px;
transition: transform .2s; /* Simple animation */
}
And then you can add this property :
your class / attriute:hover{
transform:scale(2.5);
}
Here are a few ways to enlarge the hit-hover area of an element.
Option 1: large transparent border
img {
border: 50px solid transparent;
}
img:hover {
filter: contrast(0.3);
}
<img src="https://via.placeholder.com/150" />
Option 2: add the image in CSS background: url()
div {
width: 300px;
height: 300px;
background: url(https://via.placeholder.com/150) no-repeat 50% 50%;
}
div:hover {
filter: contrast(.3);
}
<div></div>
Option 3: Target a sibling element
.wrap {
position: relative;
}
.wrap div,
.wrap img {
position: absolute;
}
.wrap div {
width: 300px;
height: 300px;
z-index: 2;
}
.wrap div:hover + img {
filter: contrast(.3);
}
<div class="wrap">
<div></div>
<img src="https://via.placeholder.com/150" />
</div>
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
I want to have an overlay over my image background, in order to see the white text above the image more clearly.
Why won't this solution work ?
HTML:
<div id="myDiv" class="bg1 image-cover">
<p>H</p>
</div>
CSS:
#myDiv {
width: 300px;
height: 300px;
color: #fff;
position: relative;
font-size: 100px;
font-weight: bold;
}
.image-cover:before {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
.bg1 {
background-size: cover;
background: url('https://2zpt4dwruy922flhqyznip50-wpengine.netdna-ssl.com/wp-content/uploads/2014/12/lock-and-stock-photos.jpg');
}
while this one does:
HTML:
<div id="myDiv" class="bg1">
<div class="image-cover">
<p>H</p>
</div>
</div>
CSS:
...
.image-cover {
content:'\A';
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.9);
opacity: 1;
}
...
I think I am misunderstanding the way :before works, but I am not fan of the second solution as it has one more div than the first.
I'm glad you're already aware of the second solution; this tends to be the approach I normally use (though not for any particular reason). You can simply modify your original approach as follows and get the desired effect:
#myDiv > p {
position: relative;
}
Namely, give the nested <p> tag a non-static position value. See here: CodePen
You can just increase the z-index of the text which is to be overlaid over the image like this:
#myDiv{
z-index: 1;
}
#myDiv p{
z-index: 2; /* should be more than the z-index of the background */
}
http://www.jsfiddle.net/3vjaxf3p/
I want to have such gradient as background for whole web page. But lines between colored sections are not smooth in most browsers. There are small 1px breaks, shelves (you understand). Is it possible to get this lines smooth?
As alternative, skewed div's technique gives smooth lines.
http://www.jsfiddle.net/6bujer9k/
html:
<div class="mainContainer">
<div class="sector firstSector"></div>
<div class="sector secondSector"></div>
<div class="sector thirdSector"></div>
<div class="sector fourthSector"></div>
<div class="sector fifthSector"></div>
<div class="sector sixthSector"></div>
<div class="sector seventhSector"></div>
<div class="sector eigthSector"></div>
<div class="sector ninthSector"></div>
</div>
css:
body {
overflow: hidden;
}
div.mainContainer {
width: 150%;
height: 780px;
position: absolute;
top: -80px;
left: -300px;
}
div.sector {
display: inline;
float: left;
height: 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
div.firstSector {
width: 9.75%;
background-color: #94C4FF;
}
div.secondSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.thirdSector {
width: 11.5%;
background-color: #94C4FF;
}
div.fourthSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.fifthSector {
width: 11.5%;
background-color: #94C4FF;
}
div.sixthSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.seventhSector {
width: 11.5%;
background-color: #94C4FF;
}
div.eigthSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.ninthSector {
width: 9.75%;
background-color: #94C4FF;
}
I think this fits better. Further I want to d
ynamically change the width of this sections on hover and fill them by some content. Is it completely bad idea to use gradients for this "transitions-animation" purpose?
Well, I've tried to make a repeated gradient as a background, but I think it would be really hard to control the size of a particular section of the background to extend it once you want to show the content, I think you will have more control if you stick to separated elements that you can change on hover.
Also, is there a particular reason for the div.sector to have display:inline;? It's already floated to the left, so it's behaving as a block element, no need to declare it as inline as well.
I hope this helps, and let me know if I did not understood you correctly.
short question: How do I achieve this scrolling effect with css? ->
http://focuslabllc.com/
I already tried this:
#one {
background: url(http://images.buzzillions.com/images_products/07/02/iron-horse- maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
#two {
background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment:fixed;
}
Thanks! :)
Its called a "curtain reveal" but in this instance its in reverse. http://www.thecssninja.com/css/reveal-effect
Essentially the first "slide" is located "below" all the other content and set to position: fixed and say z-index: 1 and all the others are set to position: relative and z-index: 10
http://jsfiddle.net/3n1gm4/8gDDy/
so in code it would be
HTML
<div class="slide1">CONTENT</div>
<div class="slide2">CONTENT</div>
CSS
.slide1 {
position: fixed;
z-index: 1; /* sets it below the other slides in the layer stack */
height: 100%
}
.slide2 {
position: relative;
z-index: 10; /* sets it above .slide1 */
margin-top: 100%; /* this pushes it below .slide1 in the scroll */
height: 100% /* full length slides */
}
* This was quickly done and probably not 100% accurate but intended to give you a basic idea about whats going on there.
Ok, you can do this with just CSS.
HTML
<div class="main">Sample text/div>
<div class="reveal-me-holder"></div>
<div class="reveal-me">Revealed</div>
CSS
body {
margin:0;
}
.main {
height: 700px;
position:relative;
z-index: 2;
background: red;
}
.reveal-me {
height: 500px;
position:fixed;
bottom:0;
width:100%;
background: black;
color:white;
}
.reveal-me-holder {
height: 500px;
}
This jsfiddle shows the results.