How to Create a CSS Glow Effect on Hover

css glow effect

The CSS Glow Effect on hover can be done by using the box-shadow styles. We also have to add transition property to the element.

 

Step number 1. Let’s create an anchor tag element

 <a href="#">glow</a> 

Step 2: Add background color and other styles

In our anchor tag, let’s add a background color and change default styles.

I’m going to remove the text-decoration. Add a padding of 15px into top and bottom and 25px for left and right side.

I also add values for fonts, just look into the code below:

a{
background-color: orange;
text-decoration:none;
padding: 15px 25px;
font-family: sans-serif;
font-size: 25px;
color: #fff;
border-radius:10px;
display: inline-block;
}

 

Read also:

 

Step 3: Add another selector for hover state

Create another anchor tag selector with :hover state. It should look like this:

a:hover{

}

Step 4. Add the box-shadow styles.

Here is where the magic happens.

Let’s add the box-shadow styles.

We can manually create it on CSS or we can also use the CSS box-shadow generator.

Box-shadow in CSS is the same with text-shadow value parameters. You can view a tutorial on CSS shadow in this video.

In this tutorial, I’m going to use the box-shadow generator.

 

Step 5. Set the Blur Radius.

css shadow generator

From there, you will have to set the Horizontal Length and Vertical Length into zero to ensure that the glow would be the same on both sides of the element.

It is important to have a higher blur radius. This would create the CSS glowing effect. I set this into 100.

Set the Shadow color. I will set the color the same background color with my element.

Leave the other options and copy the code you see on the right.

 

Step 6. Add the box-shadow styles

That’s it, add these styles to the :hover element.

a:hover{
-webkit-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
-moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
}

 

If you try to hover over our element you will see that our shadow has been applied but we don’t like to make it appear real quick.

We will add a delay into the :hover state with our element so it’ll appear as if it was glowing.

I’m going to add transition: .8s ease.

Notice after you add and hover into the anchor tag, the element shows the box-shadow slowly thanks to our transition property.

 

But it disappears really quick when we unhover?

Simple…

Just add another transition property with value into the anchor tag.

The final CSS code should look like this:

a{
background-color: orange;
text-decoration:none;
padding: 15px 25px;
font-family: sans-serif;
font-size: 25px;
color: #fff;
border-radius:10px;
display: inline-block;
transition: .8s ease
}
a:hover{
-webkit-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
-moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
transition: .8s ease;
}

CSS Hover Effects | Fade in Text with Background Source Code

Fade in Text with Background Hover

This video is going to show you how to create a CSS Fade in text with background Hover effect. An image is covered with a solid color fades in with a text when a user hovers it.

The HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="wrapper">
 <img src="animal.jpeg">
 
<div class="overlay">

<div class="content">Fade In<span>Fade In text</span></div>

 </div>

</div>


</body>
</html>

The CSS

.wrapper {
font-family: sans-serif;
width: 80%;
margin: 0 auto;
position: relative;
}

img {
display: block;
width: 100%;
height: auto;
}
.content {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
text-transform: uppercase;
font-size: 60px;
}

.content span{
font-size: 24px;
display: block
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #ff771d;
}

.wrapper:hover .overlay {
opacity: 1;
}

Fade In Background Opacity(transparent) Hover

The HTML

<!DOCTYPE html>
<html>
<head>
<title>CSS hover effects: Fade In Background opacity</title>
</head>

<body>



<div class="wrapper">
<img src="highland.jpeg">


<div class="overlay">

<div class="content">
the title <a>read more</a>
</div>


</div>


</div>



</body>
</html>

The CSS

.wrapper{
font-family:sans-serif;
width: 80%;
margin: 0 auto;
position:relative;
}
img{
opacity: 1;
display: block;
width:100%;
height: auto;
transition: .5s ease;
}
.content{
position: absolute;
top:45%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-transform: uppercase;
font-size: 60px;
color:#fff;
white-space: nowrap;
overflow: hidden
}
.content a{
font-size: 24px;
display: block;
background-color: #ff771d;
text-align: center;
padding: 10px;
cursor: pointer
}
.overlay{
opacity: 0
}
.wrapper:hover img{
opacity: .5
}
.wrapper:hover .overlay{
opacity: 1
}

How to Center an Image in CSS Very Easily

center image in css

There are few pointers to center an image in CSS.

 

  • First, make sure that the parent element of the image has its width set.
  • Second, the image should not be wider than its parent element, that’s pretty obvious.

 

See also:  How To Center A Div Inside A Div Easily

 

Center and Image in CSS horizontally

Images are the same as divs, you can use the text-align into its parent element but not the margin: 0 auto alone on the image.


To center image in div, set a width of the div then add margin:0 auto and display: block into the image in CSS.

 

The HTML code:

<div class=wrapper>
 <img src="http://www.22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg" />
</div>


 

The CSS styles:

.wrapper{
 width: 100%;
 height: 300px; 
 border: 2px solid #93c504;
}
img{
 max-width: 250px;
 display: block;
 margin: 0 auto
}

 

This will result into an image centered horizontally:

center-image_margin_0_auto

 

See the jsfiddle:


 

Make sure you have a smaller image width than the parent element.

The margin’s first value 0 was for the top and bottom margin. While the second is for left and right margin.

 

You can also set margin-left: auto and margin-right: auto on the image in CSS.

 

Center an Image in CSS horizontally and vertically

 

We will going to use the span element to guide our image  making it center. Setting an image with margin and text-alignment could not make our image center align.

 

The HTML code:

<div class=wrapper>
 <span class="for-image"></span>
 <img src="http://www.22bulbjungle.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg" />
</div>

 

The CSS styles:

.wrapper {
  width: 100%;
  height: 300px; 
  border: 2px solid #93c504;
  text-align: center
}

.for-image {
  height: 100%;
  display: inline-block;
  vertical-align: middle
}

img {
  max-width: 200px;
  height: auto;
  background: #3A6F9A;
  vertical-align: middle
}

center-image_margin_auto

Responsive design images

Creating a responsive design image is very useful for mobile devices.

Responsive image will automatically scale down and adjust to the width of the device.

To create a responsive design image, you just set a max-width: 100%; and height: auto; into the images.

 


The max-width: 100%; means the image’s width will cover all its parent’s width. You can also set a natural image width(full resolution width of the image) to the max-width property so it will not be basing upon its parent element’s width.

The height: auto; makes the image height and width proportional. As a result, it would not stretch.

 

What happens if you will not set a height: auto; is, the image’s original height will still be the same while the width is scaling according to the device’s width, so it will be non-proportional.


Background Image Color Overlay | Create a Filter Look with CSS

css_color_filter_overlay

To add a color overlay to the background image, I am going to use CSS.

 

First of all, adding a CSS background image color overlay is the most dynamic way of creating tinted web page images. It became popular to many websites which appear in homepage as banners.

 

Example:

css-background-image-color-overlay2

 

The great thing about adding background image color overlay is that you can just change any image (normal image without filter) dynamically and publish it on your website with filter, thanks to CSS.

 

So, how to do it?

 

Watch the video or continue reading.

 

 

See also:

 

Add a background property

(Yes not a background-image or background-color).

 

Within the background property, I add a linear gradient and a URL to the image.  I am using a linear-gradient background with transparency.

 

 background:
   linear-gradient(
   rgba (255, 255, 255, 0.5), 
   rgba (255, 255, 255, 0.5)
   ), 
   url(image.jpg)

 

In one CSS property, I need to set two backgrounds. The first one is the linear-gradient color and the second is the actual image.

 

Because I need to add transparency for the background color opacity, I will define RGBA inside the linear gradient.

 

Example:

linear-gradient(
   rgba (255, 255, 255, 0.5), 
   rgba (255, 255, 255, 0.5)
   );

 

The RGBA is an RGB color with an alpha channel. The alpha channel must be set between 0.0 to 1.0. It is the last parameter of the RGBA. The RGBA parameters are composed of red, green, blue, alpha.

Example: rgba (255, 255, 255, 0.5)

 

How to choose and get a color?

 

To make it easier for you to choose the color, create your web page document copying the code from here. Open it in the browser.

 

Developer tool in your browser is your friend. Right-click and inspect your web page (or CTRL+SHIFT+I).

 

On your div with the background style, click on the colored square or circle and a color picker will appear. Choose your color by dragging into the palette.

 

color-box-22bulbjungle-css-background-image-color-overlay2

 

Change the opacity of the color you’ve picked, that is important so we can mimic the overlay or color filter effect in photoshop with our background image.

 

You can also use CSS Gradient Generator from sites like colorzillacssmatic, or cssportal.

 

See the jsfiddle:

Use the background-blend-mode

Are you familiar with Photoshop blend modes?

 

Well, I can also blend our background but with CSS.

 

I can also use the linear-gradient without the transparency and add a background-blend-mode: soft-light;

 

The CSS code should look like this:

.block {
 height: 350px;
 background: linear-gradient(yellow, yellow), url(image.jpg);
 background-size: cover;
 text-align: center;
 background-blend-mode: soft-light;
}

 

As a result, the image and the color blended together in soft-light. Unlike the other way in which I can adjust the opacity.




 

You can experiment by adding different value into the background-blend-mode property.

 

background-blend-mode values include:

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • saturation
  • color
  • luminosity

 

CSS Background image color overlay in hover

 

Add a background image color overlay if the user hovers over the image.

 

 

In conclusion, adding the color filter effect can be done in two ways. The first is through a background property with the linear gradient and image url.

 

The other is to add a solid color within the parameter of linear-gradient and add the background-blend-mode property.

 

Creating a Hero Image with color filter overlay on hover

 

Hero image is a large website banner image. It is composed of the background image, texts and even a button.

 

Learn how to create your hero image with CSS background image color overlay by watching the video below:

You can use either of the two techniques to add the effect into your CSS background image.

 

How To Disable Text Selection With CSS User Select

css user select

By default, texts on any web page can be highlighted and copied. Disable the highlight function also disables someone to copy the texts in the document. Using CSS user select makes the texts unselectable.

 

If for some reasons, you do not want your texts inside the button or paragraph to highlighted. CSS user select style attribute might help you.

 

So how to disable text selection with CSS user select?

 

Learn how by watching this video or you can continue reading.

 

See more amazing CSS videos in youtube: Garnatti one

 

Target an element and add the following styles

 

-webkit-touch-callout: none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

It is self-explanatory that these styles disable the text selection.
Try to select the sentence demo below. The sentence was added with the CSS user select styles.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

 

Notice that you cannot highlight the sentence above means the styles that added worked.

 

The-webkit-touch-callout attribute targets the ios safari browser, -webkit-user-select targets Chrome, Opera and Safari browsers, -khtml-user-select targets Konqueror, -moz-user-select targets Mozilla firefox and -ms-user-select:none targets internet explorer.

 

You can use this technique.

 

Prevent people from copying your content. Unfortunately, it is useless if people inspect your code from the browser. They can just copy the content within the source code.

 

Do not want somebody to copy your contents? The better way is to disable the right-click mouse function.

 

How To Link CSS To HTML | Step By Step

how to link css to html

There are three ways to link css to html: inline, internal and external stylesheets.
Here is the video you can watch to better see how the different stylesheets are implemented or continue reading for a detailed explanation.

 

See more amazing CSS videos in youtube: Garnatti one

 

1. Inline

Use inline style if you want to add a style uniquely to an element. Just add style attribute to the chosen element/tag and then add the style attribute and value.
Example:

<h1 style=”font-family:arial; color:red”>Hello World !</h1>

 

2. Internal

If you want your css to be within the same page as your webpage then internal css stylesheet is for you. Inside the head section add an opening and closing style tag. In the opening style element, add type attribute equals to ”text/css” .

 

<style type=”text/css”> </style>

 

Between your opening and closing style tags add desired styling attribute by targeting elements.
Example:

<style type=”text/css”> h1{
	font-family: ‘arial’;
	color: red;
} </style>

 

3. External

If you want your files to be organized then use external css stylesheet. Create a css file and save(the same level with the html file).

 

Name your css file whatever you want I name mine as style.css. Inside in your head section in html add a link tag to link our css file.
Example:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

We can now add styles inside our style.css file just like the internal css styles above but without the open and closing style tags.

How To Center A Div Inside A Div Easily

how-to-center-a-div-inside-a-div-tutorial

Why do we center a div inside a div element? Notice most of any website’s main content block always on the middle or a picture perfectly aligned on the middle.

 

There are a lot of ways to center a div inside a div. In this tutorial I am going to show you two different ways to center a div element inside another.


These two videos might help you.

See also:  Center Align Texts in Vertical Position
Continue reading below if you don’t want to watch the video.

 

Margin to center a div

Make the margin of the child div (the div inside the div) set to zero and auto.

 

.child-div{
  margin: 0 auto;
}

Notice the code above we have set the first value to zero. The zero value is the margin from the top and also from the bottom of the div. In the second value, we have not set a numeric value but an auto which makes the div go in the middle horizontally. It is the margin from left and right of the div.

 

Note: Make sure to set a width in your child and parent div for this to work. The parent div should have a greater width obviously.

 

Text Align to center a div

.parent-div{
  text-align: center;
}

Telling the parent div to make its child’s text elements to center also makes the child div to center horizontally. As a result the texts inside our child div are also centered. Therefore, the last thing we need to do is to keep the text aligned to the left.

 

The solution, we should target the child div and add a CSS style but this time text alignment to the left or wherever you prefer.

 

how to center a div inside a div

 

.child-div{
  text-align:left;
}

See more amazing CSS videos in youtube: Garnatti one

 

In conclusion, the two CSS styling techniques are both great methods to use to align a child div element in the middle. The margin attribute is better than the other since it will make your code lesser and simpler.