Sure! Changing the background of an element using the ::before and ::after selectors is a technique used in CSS to create interesting visual effects on web pages. Here are the steps to follow:
1. Create a container element in HTML. For example, you can use a <div> element with a class name of "container".
2. Add content to the container element. This can be text, images, or other HTML elements that you want to display on the page.
3. Use CSS to style the container element. You can set properties such as width, height, and background-color to give it the desired appearance.
4. Use the ::before or ::after pseudo-elements to create a new layer on top of the container element. For example, you can use the ::before selector to add a new layer before the content of the container element.
5. Style the pseudo-element using CSS to create the desired background effect. You can set properties such as background-color, background-image, and background-size to change the appearance of the pseudo-element.
6. Position the pseudo-element behind the content of the container element using the z-index property. For example, you can set the z-index of the pseudo-element to -1 to position it behind the content.
In this example, the container element has a white background color and a border. The ::before selector is used to add a new layer before the content of the container element. The pseudo-element has a background image, set to cover the entire container, and an opacity of 0.5 to create a semi-transparent effect. The z-index is set to -1 to position the pseudo-element behind the content.
By following these steps, you can change the background of an element using the ::before and ::after selectors. Experiment with different properties to create your desired visual effect!
Here is an example code:
HTML CODE
<div class="main">
<div class="box">
<ion-icon name="laptop"></ion-icon>
<h4>NIELIT COURSE</h4>
<p>National Institute Of Electronics & Information Technology (NIELIT)</p>
<ion-icon name="arrow-forward-circle" class="icon"></ion-icon>
</div>
<div class="box">
<ion-icon name="code-slash"></ion-icon>
<h4>WEB DESIGNING</h4>
<p>Learn How To Make & Publish A WebSite On Internet</p>
<ion-icon name="arrow-forward-circle" class="icon"></ion-icon>
</div>
<div class="box">
<ion-icon name="logo-android"></ion-icon>
<h4>APP DEVELOPMENT</h4>
<p>Learn How To Make & Publish A Android App On Internet</p>
<ion-icon name="arrow-forward-circle" class="icon"></ion-icon>
</div>
</div>
<div class="main1">
<div class="main1_div">
<div class="main1_div_box">
<h1>O-Lavel</h1>
</div>
<p>1-YEAR</p>
<ion-icon name="search"></ion-icon>
</div>
<div class="main1_div">
<div class="main1_div_box">
<h1>ECC</h1>
</div>
<p>6-MONTHS</p>
<ion-icon name="search"></ion-icon>
</div>
<div class="main1_div">
<div class="main1_div_box">
<h1>CCC</h1>
</div>
<p>3-MONTHS</p>
<ion-icon name="search"></ion-icon>
</div>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
* {
margin: 0;
padding: 0;
font-family: arial;
}
.main {
width: 1020px;
height: 350px;
/*background-color: darkred;*/
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.box {
width: 300px;
height: 300px;
background-color: #f5f5f5;
margin: 20px;
float: left;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
position: relative;
transition: .8s;
color: #707070;
border-radius: 10px;
}
.box:hover {
color: white;
}
.box ion-icon {
font-size: 50px;
position: absolute;
top: 20px;
}
.box h4 {
position: absolute;
top: 80px;
font-size: 20px;
}
.box p {
z-index: 1;
line-height: 23px;
margin-left: 30px;
margin-right: 30px;
}
.icon {
margin-top: 65%;
}
.box:before {
content: '';
width: 200px;
height: 200px;
position: absolute;
transition: .5s;
opacity: 0;
border-radius: 10px;
}
.box:hover:before {
width: 100%;
height: 100%;
opacity: 1;
background-color: #25316D;
}
.main1 {
width: 1020px;
height: 350px;
/*background-color: darkred;*/
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}
.main1_div {
width: 300px;
height: 300px;
background-color: #f5f5f5;
margin: 20px;
float: left;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
position: relative;
transition: .8s;
color: #707070;
border-radius: 10px;
}
.main1_div:before {
content: '';
width: 300px;
height: 300px;
position: absolute;
opacity: 0;
border-radius: 10px;
transition: .5s;
background: linear-gradient(to left, rgba(0, 0, 0, 0.5)50%, rgba(0, 0, 0, 0.5)50%);
}
.main1_div:hover:before {
opacity: .8;
}
.main1_div ion-icon {
color: #fff;
font-size: 30px;
position: absolute;
top: 100%;
transition: .5s;
opacity: 0;
background-color: #25316D;
padding: 10px;
border-radius: 50%;
}
.main1_div:hover ion-icon {
top: 40%;
opacity: 1;
}
.main1_div h1 {
font-size: 60px;
}
.main1_div_box {
width: 300px;
height: 70px;
background-color: #25316D;
position: absolute;
top: 20%;
color: white;
}
.main1_div p {
font-size: 50px;
margin-top: 20px;
}
Comments
Post a Comment