CODEWITHSUNDEEP
javascriptjquerycss
Paul
Paul

Reputation: 3368

How to make opacity gradually scale

I have a div, imgCover that overlaps an image. imgCover has a background set at rgba(255,255,255,.7), but I am wanting the opacity to gradually go from 0.0 - 1.0.

Is there anyway that I can get the imgCover's opacity to be at 0.0 at the far left and then at the far right 1.0?

jsfiddle

#conveyorSec {
	padding: 50px 0;
	height: auto;
	width: 100%;
}
#conveyorInner {
	margin: 0 5%;
	width: 90%;
	height: 100%;
	position: relative;
}
#conveyorInner img {
	width: 100%;
	height: auto;
}
#imgCover {
	width: 40%;
	height: 100%;
	position: absolute;
	background-color: rgba(255,255,255,.7);
	right: 0;
	top: 0;
	z-index: 99;
}
<section id="conveyorSec">
			<div id="conveyorInner">
				<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
				<div id="imgCover"></div>
			</div>
		</section>

Upvotes: 1

Views: 50

Answers (1)

Taki
Taki

Reputation: 17654

Use linear gradient instead of background-color:

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)); 


#conveyorSec {
	padding: 50px 0;
	height: auto;
	width: 100%;
}
#conveyorInner {
	margin: 0 5%;
	width: 90%;
	height: 100%;
	position: relative;
}
#conveyorInner img {
	width: 100%;
	height: auto;
}
#imgCover {
	width: 40%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
	right: 0;
	top: 0;
	z-index: 99;
}
<section id="conveyorSec">
  <div id="conveyorInner">
    <img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
    <div id="imgCover"></div>
  </div>
</section>

Upvotes: 1

Related Questions