How to release an image from right to left?
I want the image to fade from right to left. It should fade out as we can see its original clear view at 70% right and start fading out at 30% left.
This is how I want it to look:
This is my code:
#main_section {
/* border: 1px solid blue; */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
#main_section li {
margin-left: 5px;
display: inline-block;
font-family: Euphemia;
font-weight: bold;
color: green;
}
.style_number {
font: italic 1.2em Georgia, Times, serif;
font-weight: bold;
color: #4169E1;
}
#img1::before {
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background-image: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background-image: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
content: "\00a0";
height: 50%;
position: absolute;
width: 50%;
}
#img1 {
float: right;
}
<section id="main_section">
<marquee behavior="alternate">We are coming soon, please check back later.</marquee>
<img src="img_ak/image_1st_body.jpg" id="img1" width="650" height="300" alt="" />
<ol>
<li>
<span class="style_number">1.</span> INKOMSTDEKLARATION
<br /><br /><br />
<span class="style_number">2.</span> MOMSDEKLARATION
<br /><br /><br />
<span class="style_number">3.</span> BOLAGSBILDNING
<br /><br /><br />
<span class="style_number">4.</span> EKONOMI KONSLUT
<br /><br /><br />
<span class="style_number">5.</span> LÖPANDE BÖKFÖRING
</li>
<li>
<span class="style_number">6.</span> BOKSLUT & ÅRSREDOVISNING
<br /><br /><br />
<span class="style_number">7.</span> SKATTEDEKLARATION
<br /><br /><br />
<span class="style_number">8.</span> LÖNEADMINISTRATION
<br /><br /><br />
<span class="style_number">9.</span> FAKTURERING
<br /><br /><br />
<span class="style_number">10.</span> ONE MORE
</li>
</ol>
</section>
source to share
The problem is that the tag img
cannot contain aliases :before
or :after
because the image is a tag that has no content (why does it close the tag itself <img />
).
You can just wrap the image with a div and apply gradient styles to it :before
instead:
.img-wrap {
position: relative;
}
.img-wrap::before {
background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
top: 0;
left: 0;
height: 100%;
width: 100%;
...
}
HTML:
<div class="img-wrap">
<img src="img_ak/image_1st_body.jpg" id="img1" width="650" height="300" alt=""/>
</div>
Demo: http://jsfiddle.net/xwcb7x05/1/
source to share
Use linear-gradient
:
.FadeAway {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: transparent;
background: linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
background: -ms-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
-ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
}
.content {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 100%;
background: url('http://phillipspet.com/wp-content/uploads/2014/08/blackcat.jpg') no-repeat;
}
<div class="content"></div>
<div class="FadeAway"></div>
The above code will work in as many browsers as possible, including IE (versions up to 9)
source to share