Change Full Screen Image on Hover, Learn advanced CSS




In this tutorial, we will learn how to use combination of advanced CSS, HTML, and Javascript to create magnificent CSS effect.


If you are a begginer, you can simply copy paste the code from the code examples, or from the code editors, and use it for your own project, although I recommend that you try to understand this advanced CSS tutorial
Hover over the numbers to watch the effect:





Click to see full page >>


Open in code editor >>


Let's enter the deepest realms of CSS3 in this advanced CSS tutorial to create an amazing page.


This advanced CSS tutorial with example is great for a portfolio website, or in addition to any website.

This lesson include:


  • HTML Instructions
  • CSS Instructions
  • Javascript and Jquery Instructions

We will add comments inside the example code boxes and code editors to explain as much as we can, comments are in grey color.





Part 1


Add HTML



Follow our comments inside the code example box ( in grey ).


Visit our HTML Editors lesson if you don't know how to open and edit HTML file:


HTML Editors >>



Code Example:

           <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!--the entire page content is inside the body tag -->
<body>
<!--the main container that holds the page content -->
<div class="container">
<!--the columns that holds the text boxes -->
  <div class="column">


<!-- here start the text and image boxes: -->


<!-- box number 1 -->
    <div class="info">
<!-- heading number 1 -->
      <h1>1</h1>
<!-- text box number 1 -->
      <div class="box">
      <h2>FreeCodeWiki</h2>
<!-- paragraph in box 1 -->
      <p>add text here</p>
      </div>
    </div>
<!-- photo number 1 -->
    <div class="bg bg1"></div>
  </div>
  <div class="column active">

  <!-- box number 2 -->
    <div class="info">
  <!-- heading number 2 -->
      <h1>2</h1>
 <!-- text box number 2 -->
      <div class="box">
      <h2>FreeCodeWiki</h2>
 <!-- paragraph in box 2 -->
      <p>add text here</p>
      </div>
    </div>
 <!-- photo number 2 -->
    <div class="bg bg2"></div>
  </div>
  <div class="column">
 <!-- box number 3 -->
    <div class="info">
 <!-- heading number 3 -->
      <h1>3</h1>
 <!-- text box number 3 -->
      <div class="box">
      <h2>FreeCodeWiki</h2>
 <!-- paragraph in box 3 -->
      <p>add text here</p>
      </div>
    </div>
 <!-- photo number 3 -->
    <div class="bg bg3"></div>
  </div>
  <div class="column">
 <!-- box number 4 -->
    <div class="info">
 <!-- heading number 4 -->
      <h1>4</h1>
 <!-- text box number 4 -->
      <div class="box">
      <h2>FreeCodeWiki</h2>
 <!-- paragraph in box 4 -->
      <p>add text here</p>
      </div>
    </div>
 <!-- photo number 4 -->
    <div class="bg bg4"></div>
  </div>
</div>
</body>
</html> 
  
Try yourself >>





Part 2


Add CSS

Add the style sheets:


Code Example:

         <style>
/* font type and general setting of the page */
body {
padding:0;
margin:0;
font-family:sans-serif;
}
/*control the style of the main container that holds the page content */
.container
{
height:100vh;
width:100%;
overflow:hidden;
}
/*control the style of the columns inside the main container */
.container .column
{
width:25%;
float:left;
height:100%;
box-sizing:border-box;
z-index:1;
border-right:2px solid rgba(0,0,0,.5);
}
.container .column:last-child
{
border-right:none;
}
.container .column .info
{
height:100%;
position:relative;  
}
/* control the size of each text box, the transform speed movement, and border radius */
.container .column .info .box
{
top:50%;
/* relative makes the boxes responsive for diffrenet screen sizes */
position:relative; 
transform: translateY(100%);
box-sizing:border-box;
background:rgba(255,255,255,1);
transition:0.5s;
opacity:0;
padding:40px;
border-radius:10px;
}
.container .column.active .info .box
{
opacity:1;
transform: translateY(-50%);
}
/* control the style of the heading */
.container .column .info .box h2
{
font-size:30px;
color:#262626;
padding:0;
margin:0;
}
/* control the size of the paragraphs inside the text boxes */
.container .column .info .box p
{
font-size:18px;
color:#262626;
}
/* control all the images boxes and position */
.container .column .bg
{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
pointer-events:none;
}
/* control image number 1 */
.container .column.active .bg.bg1
{
background: url(../img/advancedcss2.jpg);
background-position:center;
background-size:cover;
background-attachment:fixed;
transition:0.5s;
}
/* control image number 2 */
.container .column.active .bg.bg2
{
background: url(../img/advancedcss4.jpg);
background-position:center;
background-size:cover;
background-attachment:fixed;
transition:0.5s;
}
/* control image number 3 */
.container .column.active .bg.bg3
{
background: url(../img/advancedcss1.jpg);
background-position:center;
background-size:cover;
background-attachment:fixed;
transition:0.5s;
}
/* control image number 4 */
.container .column.active .bg.bg4
{
background: url(../img/advancedcss3.jpg);
background-position:center;
background-size:cover;
background-attachment:fixed;
transition:0.5s;
}
/* control large heading style */
.container .column .info  h1
{
top:50%;
position:absolute;
width:100%;
transform: translateY(-50%);
background:rgba(0,0,0,.1);
text-align:center;
padding:0;
margin:0;
font-size:15em;
border-top:2px solid rgba(0,0,0,.5);
border-bottom:2px solid rgba(0,0,0,.5);
color:rgba(255,255,255,.2);
}
/* remove headling in small screens for better look. */
@media only screen and (max-width: 600px)
{ 
.container .column .info .box h2
{
 display:none;   
}
}
</style> 
  

Try yourself >>






Part 3


Add Jquery and Javascript

Code Example:

         <script
  src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script type="text/javascript">
  $(document).on('mouseover' , '.container .column', function(){
$(this).addClass('active').siblings().removeClass('active')
  })
  </script> 
  

Try yourself >>






Studying modern front-end development was never so easy, Learn to Code HTML & CSS in an interactive beginner’s guide with one goal: teach you how to develop and style websites with HTML and CSS, this advanced CSS tutorial covers all of the common and advanced elements of front-end design and development, take a deeper look at front-end design and development, expanding on what is covered in the beginner’s guide, this guide teaches the latest for any designer looking to round out their front-end skills.

Navigation