28 July 2020   |   by Pratyush Aswal   |   Web Development, Blogs

Sliding background effect using CSS

Design sliding background animation effect without using Bootstrap


In this article, we will explain you step by step, how to implement cool css sliding animation using CSS in an easy way. Here is a nice hover effect which can be seen and is often used in a wide variety of websites. The effect we have made here uses css properties and no frameworks like bootstrap. If you are in a hurry or are here just for the functionality, let us begin with the non-aesthetic functionality only version.


Hover your cursor on the image title and observe the effect



Version 1 - Implementing functionality

We will implement first as shown below:

24
Oct
Asian martial arts

Hover your cursor on the black portion of the image and observe the effect


HTML

1. We will build some divisions to get started as:

Here we made two sections of a div (“container”). The left div will remain constant and the right div will change its background on hover.


CSS

2. Now we will define the style.

Explanation

a. Linear gradient: background goes from left to right with yellow(#FFD510) color on left and black on right occupying 50% width each.
b. Background-size: we make width of background 200% to make the whole div look like yellow.
c. Background-position: we set background position to right to set the starting of the background to the right. Therefore, background looks black.

3. Hover: On hover, we define css as following Explanation

a. Background-position: set the background position to the left to set the starting of background to left. Because of 200% background size, background color will change to yellow in 0.4 seconds due to transition.
b. Color: text color will transition to black as the background color will change to yellow.



Version 2 - Implementing functionality with design

We will now implement as shown below:

Hover your cursor on the image title and observe the effect

HTML

1. Structuring divs needed for above image

CSS

2. Styling of above divs.




It uses the same concept, only difference is styling and formatting of texts and divisions. It can be made to create a simple button, a menu item or just for the looks as we have done here. The simple animations like these help to attract the attention of the user hence giving user a great experience. Feel free to use above code to make more stylish hover effects.