CSSonly - identity design

Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It

djemals — Sun, 11 May 2025 06:23:26 +0000

If you’re designing for mobile Safari and notice your phone numbers mysteriously turning blue and underlined, you’re not alone. By default, Safari automatically detects phone numbers and converts them into clickable links—often overriding your CSS styles in the process.

The Problem

Safari’s automatic phone number detection is helpful in some cases, but for designers and developers, it can break the intended layout or brand consistency—especially when you’re working with custom fonts or color schemes.

The Simple Fix

The good news is that you can disable this behavior with just one line of code in your tag:

This tells Safari not to automatically detect and format telephone numbers, allowing you full control over how numbers appear on your site.

Pro Tip

If you still want numbers to be clickable but styled your way, you can manually wrap them in tags and apply your own CSS:

(123) 456-7890

Then style it however you like:

.phone {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

Final Thoughts

Safari’s auto-detection can be helpful for users, but problematic for designers. With a simple meta tag or some controlled styling, you can prevent unwanted design changes and keep your UI consistent across all browsers.

For more quick dev tips like this, check back at blog.identitydesign.us

The post Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It first appeared on identity design.

The post Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It appeared first on identity design.

CSS: How to Make an Anchor Not Clickable in HTML

djemals — Tue, 01 Oct 2024 18:43:52 +0000

When building web pages, there are times you might want an anchor link () to be visible but non-functional. Perhaps you’re still working on that section of your website, or the link is for decorative purposes only. Whatever the reason, making an anchor not clickable is simple with a few CSS rules.

The Code Snippet

Let’s start with a quick code snippet that makes an anchor tag unclickable:

Unclickable Link

Then, in your CSS, add the following styles:

.inactive-link {
    pointer-events: none;
    cursor: default;
}

A Use Case for This Approach

Let’s say you have a navigation menu, but one of the pages is under construction. You still want the link to be visible for design consistency, but don’t want users to interact with it. Here’s an example:


  
    Home
    About
    Contact (Coming Soon)

Conclusion

With just a couple of lines of CSS, you can make any anchor tag unclickable. It’s a quick and effective way to manage inactive or placeholder links on your website. Try this technique next time you need a link to be visible but non-functional!

The post CSS: How to Make an Anchor Not Clickable in HTML first appeared on identity design.

The post CSS: How to Make an Anchor Not Clickable in HTML appeared first on identity design.

CSS Only Animation: Zoom on Hover

djemals — Thu, 11 Apr 2024 08:31:49 +0000

In today’s quick tip, we’ll dive into creating a dynamic ‘zoom on hover’ effect that adds an interactive touch to images on your web pages. By incorporating the provided CSS, your images will elegantly scale up when hovered over. This effect, achieved with minimal code, is a fantastic way to enhance your website’s visual appeal and engage your visitors.

DEMO: Zoom on Hover

HTML

CSS

.zoom-in { transition:transform .2s; }
.zoom-in:hover { transform: scale(1.2); }

The post CSS Only Animation: Zoom on Hover first appeared on identity design.

The post CSS Only Animation: Zoom on Hover appeared first on identity design.

CSS Only Animation: Image Swapping on Hover (Logo Swap)

djemals — Sat, 09 Mar 2024 00:27:13 +0000

Explore how to enhance your website’s interactivity with this simple guide on implementing a logo or image swap effect upon mouse hover. Ideal for web designers and developers, this tutorial includes step-by-step instructions, complete with HTML and CSS code snippets, to seamlessly integrate this dynamic visual cue into your web project. Perfect for adding that extra flair to logos or images on your site, learn how to create a more engaging user experience with ease.

DEMO: Swapping Logo/Image on Hover of Mouse

HTML

CSS

.swap { height: 200px; width: 200px; position: relative; }
.swap img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	transition: opacity .9s;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.swap img.hover, .swap:hover img.main { opacity:0; }
.swap img.hover:hover { opacity:1; }

The post CSS Only Animation: Image Swapping on Hover (Logo Swap) first appeared on identity design.

The post CSS Only Animation: Image Swapping on Hover (Logo Swap) appeared first on identity design.

CSS Animation: Image Scrolling on Hover

djemals — Wed, 11 Oct 2023 00:50:39 +0000

In the ever-evolving world of web design, adding interactive and visually appealing elements to your website can greatly enhance the user experience. One exciting way to achieve this is by learning how to create an image scrolling effect on hover with CSS animation. With just a few lines of code, you can transform a static image into an engaging and dynamic component that draws the viewer’s attention. So, let’s dive in and discover how to make your website come to life with CSS image scrolling on hover!

DEMO: Mouse over to see the scrolling animation

HTML

CSS

img { 
	object-fit: cover;
	object-position: top;
	transition: ease-in-out 4s;
	width: 450px;
	height: 300px;
}
img:hover {
	object-position: bottom;
}

The post CSS Animation: Image Scrolling on Hover first appeared on identity design.

The post CSS Animation: Image Scrolling on Hover appeared first on identity design.

How to Add Deny Access to the .htaccess File

djemals — Mon, 08 May 2023 23:03:49 +0000

The .htaccess file is an important configuration file for websites that use the Apache web server. It allows you to control various aspects of your website, such as redirections, password protection, and caching. However, because the .htaccess file is so powerful, it is also a target for hackers and other malicious actors who may try to exploit it to gain access to your website or server.

One way to protect your .htaccess file is to add a “deny from all” rule to it. This will prevent anyone from accessing the file directly, including hackers who may be trying to modify it.

Here’s how to add a deny access rule to your .htaccess file:

1. Access your website’s .htaccess file

First, you’ll need to access your website’s .htaccess file. You can do this by connecting to your website’s server via FTP or SSH, and navigating to the directory where your website’s files are stored. The .htaccess file should be located in the root directory of your website.

2. Add the deny access rule

Next, open the .htaccess file in a text editor and add the following line at the top of the file:

#deny access to .htaccess

Order allow,deny
Deny from all

This rule specifies that access to the .htaccess file should be denied for all users.

3. Save the changes

Save the changes to your .htaccess file and upload it back to your website’s server.

By adding a deny access rule to your .htaccess file, you can help protect your website from malicious attacks and unauthorized access. However, it’s important to remember that this is just one of many security measures that you should take to protect your website. Be sure to keep your software and plugins up-to-date, use strong passwords, and implement other security best practices to keep your website secure.

The post How to Add Deny Access to the .htaccess File first appeared on identity design.

The post How to Add Deny Access to the .htaccess File appeared first on identity design.

HTML-CSS-JS: Simple Hamburger Menu Expandable

djemals — Sat, 10 Dec 2022 01:16:30 +0000

“How to create an expandable hamburger menu?”

DEMO: How It Looks

HTML


  
      
    
      
         Home
         Section 1
         Section 2
         Section 3

CSS

body {
	background-color: black; font-family:sans-serif; 
}
header a {
	color: #111 !important;
	text-decoration: none!important;
	font-weight: 200;
	font-size: 2.2rem;
	line-height: 1.2;
	display: block;
}
.header__menu {
	position: fixed;
	top: 34px;
	right: 30px;
	z-index: 10;
}
.menu__icon {
	z-index: 5;
	display: block;
	position: relative;
	width: 50px;
	height: 22px;
	cursor: pointer;
}
.menu__icon span, .menu__icon::before, .menu__icon::after {
	left: 0;
	position: absolute;
	height: 20%;
	width: 100%;
	transition: all 0.3s ease 0s;
	background-color: white;
}
.menu__icon::before, .menu__icon::after {
	content: '';
}
.menu__icon::before {
	top: 0;
}
.menu__icon::after {
	bottom: 0;
}
.menu__icon span {
	top: 50%;
	transform: scale(1) translate(0, -50%);
}
.menu__icon._active span {
	transform: scale(0) translate(0, -50%);
}
.menu__icon._active::before {
	top: 50%;
	transform: rotate(-45deg) translate(0, -50%);
}
.menu__icon._active::after {
	bottom: 50%;
	transform: rotate(45deg) translate(0, 50%);
}
.menu__body {
	position: fixed;
	top: 0;
	right: -99%;
	width: 34%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.8);
	padding: 100px 30px 30px 30px;
	transition: right 0.3s ease 0s;
	overflow: auto;
}
.menu__body._active {
	right: 0;
}
.menu__list > li {
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.menu__body ul {
	padding-left: 1rem;
	list-style: none;
}

JavaScript

Link the below external Javascript into the bottom of your HTML.

With having the hamburger menu on your navigation, your website could look more sophisticated and clean.

The post HTML-CSS-JS: Simple Hamburger Menu Expandable first appeared on identity design.

The post HTML-CSS-JS: Simple Hamburger Menu Expandable appeared first on identity design.

CSS: Button Push Shadow Effect on Hover

djemals — Tue, 08 Nov 2022 22:43:08 +0000

“How to create a shadow effect when hovering on a box?”

DEMO: How It Looks

TRY HOVERING OVER THE BOX!

HTML

TRY HOVERING OVER THE BOX!

CSS

.button-pop {
    border: 2px solid black;
    padding: 1rem; 
    width:200px;
    height:200px;
}
.button-pop:hover {
    position: relative;
    right: 5px;
    bottom: 5px;
    box-shadow: 7px 7px #111;
}

It’s pretty simple. Enjoy coding!

The post CSS: Button Push Shadow Effect on Hover first appeared on identity design.

The post CSS: Button Push Shadow Effect on Hover appeared first on identity design.

CSS: Use your desktop fonts to your website

djemals — Tue, 01 Nov 2022 19:51:15 +0000

“How to use .OTF (or other desktop) fonts to your website?”

If you would like to use your desktop fonts to your website, do this!

CSS

Select and place fonts to the server.
Copy and paste codes below to your stylesheet.
Replace font-family: ‘FONT1‘ on both @font-face and p with your own font name.
You may change normal to bold if necessary.

@font-face {
	font-family: 'FONT1';
	src: url("../fonts/YOUR-FONT-LOCATION.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}
p { 
	font-family: 'FONT1', sans-serif; 
}

The post CSS: Use your desktop fonts to your website first appeared on identity design.

The post CSS: Use your desktop fonts to your website appeared first on identity design.

YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area

djemals — Fri, 08 Jul 2022 22:20:07 +0000

YARPP (Yet Another Related Posts Plugin) is one of the greatest plugins in WordPress that provides related posts automatically using an algorithm, but there are a few things that can’t be easily fixed through its settings.

How to remove the “You May Also Like” header on the sidebar widget YARPP Plugin for WordPress?

I’ve tried many options in the settings, but they didn’t seem to work. Try using the CSS code below to remove it easily.

CSS

Copy the code below and paste it into your CSS document.

.yarpp-related-widget h3 { display:none; }

Tada!

The post YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area first appeared on identity design.

The post YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area appeared first on identity design.

How to remove the “Related Posts” on YARPP Plugin for WordPress

djemals — Fri, 08 Jul 2022 22:12:20 +0000

YARPP(Yet Another Related Posts Plugin) is a one of the greatest plugins in WordPress that provides related posts automatically with algorithm, but there are a few things can’t be easily fixable on its setting.

How to remove the “Related Posts” on YARPP?

I’ve tried many options on their settings to remove the Related Posts on the bottom of a page, but it seems not working. Try below CSS line to remove it with ease.

CSS

Copy the code below and paste into your CSS document.

.yarpp-related-website { display:none; }

Tada!

The post How to remove the “Related Posts” on YARPP Plugin for WordPress first appeared on identity design.

The post How to remove the “Related Posts” on YARPP Plugin for WordPress appeared first on identity design.

WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu

djemals — Mon, 11 Oct 2021 07:12:59 +0000

I’ve been searching how to remove/hide the cart bubble on hover of the cart icon on header in Astra / WooCommerce combination.

This can’t be modified via Appearance -> Customize setting. Instead, I was able to hide the element with a simple CSS line as below:

.ast-site-header-cart:hover .widget_shopping_cart, .woocommerce .ast-site-header-cart:hover .widget_shopping_cart{ display:none; }

Feel free to comment me if this doesn’t work for you.

The post WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu first appeared on identity design.

The post WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu appeared first on identity design.

CSS: Make Perfect Responsive YouTube Embedded Iframed Videos

djemals — Mon, 16 Aug 2021 20:19:19 +0000

YouTubes are great way to embed videos for websites, and it’s really easy to get code to place on your website. Right-click on the video you wish to embed, select “Copy embed code” from the drop-down menus. Paste the code into the HTML fields and BAM! your video just added to the page.

The video might look great with your desktop screen, but depends on your device screens sizes with dimensions, the video might have black empty spaces on top and bottom of the videos. How do I fix this?

Make Youtube Video Responsive for All Screen Sizes without Leaving Black Areas

Add a wrap .iframe-wrap around the iframe code you embedded.

HTML

CSS

Copy the code below and paste into your CSS document.

.iframe-wrap {
    position: relative;
    padding-bottom: 50%; /**YOU MIGHT HAVE TO ADJUST TO FIT PERFECTLY**/
}
iframe {
    position: absolute;
    width: 100%
    height: 100%;
}

As commented in the .iframe-wrap, you might have to adjust to fit perfectly. It normally fits well between 50% to 60%. Enjoy coding!

The post CSS: Make Perfect Responsive YouTube Embedded Iframed Videos first appeared on identity design.

The post CSS: Make Perfect Responsive YouTube Embedded Iframed Videos appeared first on identity design.

CSS: Crop Image Width or Height with CSS Only

djemals — Fri, 06 Aug 2021 00:04:12 +0000

Images can be cropped with a couple of CSS lines without using Photoshop or any image editing tools. This is useful when your multiple column thumbnail image height is different like below.

BEFORE

Because of the uneven height of the thumbnails the entire structure could be easily broken.

CSS

Copy the code below and paste into your CSS document.

img {
    height: 200px;
    object-fit: cover;
}

Try object-position: 10% 10%; if you want to move around the position of the image within the area.

AFTER

All 20-30 of your thumbnails will fit perfectly, and your layout won’t look wonky again. This method could be used on any single image on your webpage.

The post CSS: Crop Image Width or Height with CSS Only first appeared on identity design.

The post CSS: Crop Image Width or Height with CSS Only appeared first on identity design.

Use CSS to remove auto-generated empty <p> tags in WordPress

djemals — Sun, 24 Jan 2021 09:26:22 +0000

Can’t complain the great convenient functionality of auto-generating

tag in WordPress, but sometimes it’s pretty annoying as it breaks some lines unintentionally. Here’s how to remove only empty

tag with a simple CSS line.

CSS: Hide/Remove Empty
tags

p:empty {
  display: none;
}

The post Use CSS to remove auto-generated empty

tags in WordPress first appeared on identity design.

The post Use CSS to remove auto-generated empty

tags in WordPress appeared first on identity design.

Bootstrap Uneven Column Heights Issue in Layout Grid System

djemals — Wed, 17 Jun 2020 09:11:41 +0000

Bootstrap columns could go wrong and look uneven when columns have different heights. Use float: left to clear out the float properties and to stack blocks to the closest side.

.col-lg-3:nth-child(5n) { clear: left; }

If you have multiple blocks (for instance, 4-column layout) use float: left pseudo-element to apply the class every 5th element 5n.

The post Bootstrap Uneven Column Heights Issue in Layout Grid System first appeared on identity design.

The post Bootstrap Uneven Column Heights Issue in Layout Grid System appeared first on identity design.

CSS Only: Pop-up Modal Lightbox on Page Load

djemals — Fri, 10 Apr 2020 18:24:30 +0000

I’ve shared a way to add a pop-up or modal lightbox with CSS only on my earlier post, Easy Modal Lightbox Pop-Up. I’ve received many request how to make this modal pop up on page load instead of using a button. So, here’s how-to:

HTML

Copy the code below and paste into your HTML document.


   
      
         ×
         Modal Headline
         Modal description goes here.

CSS

Copy the code below and paste into your CSS document.

.modal {
	z-index: 10;
	display: block;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

.animate-opacity is optional as it’s the animated effect when modal opens.

You can tweak the animation time. It’s currently 0.8 seconds opac 0.8s , but change the timing as your need.

The post CSS Only: Pop-up Modal Lightbox on Page Load first appeared on identity design.

The post CSS Only: Pop-up Modal Lightbox on Page Load appeared first on identity design.

Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review

djemals — Mon, 09 Mar 2020 07:13:17 +0000

Very strange? I just made the reviews functionality active on my WordPress Woocommerce website, and I see the icons are broken with square boxes (some says “SSSSS”). There should be some CSS conflicts where the icon fonts were not properly loaded. So, I’ve came up overwriting some CSS styling including a new font-family to the page, and it’s working!

p.stars a:before, p.stars a:hover, p.stars a:visited, p.stars a:focus, p.stars a:hover~a:before, p.stars:hover a:before, p.stars.selected a:not(.active):before, p.stars.selected a.active:before, p.stars.selected a.active~a:before {
    font-family: 'star';
    content: '\53';
    line-height: 1.4 !important;
}

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review first appeared on identity design.

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review appeared first on identity design.

Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme

djemals — Sun, 01 Dec 2019 06:10:59 +0000

Woocommerce offers one of a greatest E-Commerce template themes for free called, “Storefront“. From the Nav to checkout process, all required functionality in order to run an E-Commerce are ready for you to download and activate. But, one little thing is bugging at the bottom of the page, “Built with Storefront & WooCommerce.” line, however, it’s possible to get it out with a few lines of CSS.

Remove and replace copyright information on Storefront theme

footer .site-infos { display:none; } 				
footer .footer-widgets { border: 0 !important;	}	
footer .footer-widgets::after {  content: "© ADD THIS FOR YOUR COPYRIGHT INFO" }

The post Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme first appeared on identity design.

The post Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme appeared first on identity design.

CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible

djemals — Thu, 31 Oct 2019 00:08:45 +0000

Sometimes the text or caption is not legible on an image depends on the color contrast between the foreground element and the background. I used to edit my image to be more darker or lighter to make the HTML text stand out and readable to users, but well, here’s must easier solution with lines of CSS!

Original

CSS Gradient

HTML

Copy the code below and paste into your HTML document.


    
        CSS Gradient

CSS

Copy the code below and paste into your CSS document.

.hero-outer { position:relative; }
.hero-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0.5;
}
.hero-inner { 
    background: url('https://blog.identitydesign.us/wp-content/uploads/2019/10/300x200-gradient-1.jpg'); 
    width:100%;
    height: 400px;
    background-size:cover;
}
.hero-inner p { 
    color:#fff; 
    position:relative; 
    font-size: 50px !important; 
    padding-right: 40px;
    text-align: right;
    top: 20px;
    z-index: 1;
}

The post CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible first appeared on identity design.

The post CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible appeared first on identity design.

Add a Copyright Text / Info Using CSS on WordPress Websites

djemals — Thu, 19 Sep 2019 20:05:49 +0000

Let’s don’t bother spending hours to look for footer.php or widgets in WordPress to add your Copyright line on the footer of website. Here’s one easy method to add using CSS.

Add copyright text / info with CSS for WordPress/Bootstrap websites

footer > div:before {
    content: "© Copyright (YEAR). All rights reserved.";
    font-size: 14px;
    color: #777;
    text-align: center;
    display: block;
    margin: 20px auto;
}

The post Add a Copyright Text / Info Using CSS on WordPress Websites first appeared on identity design.

The post Add a Copyright Text / Info Using CSS on WordPress Websites appeared first on identity design.

How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template

djemals — Sat, 01 Jun 2019 00:30:06 +0000

WP Bootstrap Starter Theme is one of a popular templates you can get it for free in WordPress. It’s nice with light weighted built in Boostrap 4 framework so it’s ready to use just by having the theme itself.

You can pretty much edit the entire website including the header and footer except for removing the copyright text very bottom of the page saying, “Bootstrap WordPress Theme”.

Here’s a way to make it disappear by adding a CSS line. Let me show you how to do this in a minute!

Remove “Bootstrap WordPress Theme” text on the footer

Go to the Admin website -> Appearance -> Customize -> Additional CSS
Copy the CSS code below and paste on the CSS window.
Save!

footer .sep, footer .credits {
    display:none;
}

The post How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template first appeared on identity design.

The post How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template appeared first on identity design.

CSS / HTML: Make Absolute Center (Vertical & Horizontal)

djemals — Sat, 09 Feb 2019 01:05:02 +0000

For some reasons, making an article absolute center was pretty tricky with HTML.

Horizontal centering is mostly done by text-align:center or margin:auto tags in css. Vertical alignment has to do with positions or vertical-align:middle, and many times an image or other elements are not centering correctly.

Try this below, this is one easy way making your content elements absolute center in vertical and horizontal.

DEMO: Vertical & Horizontal Absolute Centering

Hello.
Your centered content is here!

CSS

Copy the code below and paste into your CSS document.

body {
	display: flex;
	justify-content: center;
	align-items: center;
        text-align:center;
}

Easy and fantastic!

The post CSS / HTML: Make Absolute Center (Vertical & Horizontal) first appeared on identity design.

The post CSS / HTML: Make Absolute Center (Vertical & Horizontal) appeared first on identity design.

CSS Only: Easy Modal Lightbox Pop-up (Animated)

djemals — Tue, 29 Jan 2019 19:50:57 +0000

Now you can add pop-ups or modal lightbox with CSS only (and really minor single line of JavaScript) on your html, wordpress or bootstrap website, so don’t be afraid.

DEMO: CSS Modal Lightbox

HTML

Copy the code below and paste into your HTML document.




   
      
         ×
         Modal Headline
         Modal description goes here.

You can add multiple modals. Copy the entire codes and replace all modal-1 into modal-2 and modal-3 …

CSS

Copy the code below and paste into your CSS document.

.modal {
	z-index: 10;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

These 4 classes would do the job, and the last class, .animate-opacity is the animated effect when modal opens (so it’s optional).

You can tweak the animation time slower or faster by changing the speed time. It’s currently 0.8 seconds, opac 0.8s, but change it as you need it. Have fun!

The post CSS Only: Easy Modal Lightbox Pop-up (Animated) first appeared on identity design.

The post CSS Only: Easy Modal Lightbox Pop-up (Animated) appeared first on identity design.

CSSonly - identity design

Safari Browser Phone Numbers Forcing Blue? Here’s How to Fix It

The Problem

The Simple Fix

Pro Tip

Final Thoughts

Related posts:

CSS: How to Make an Anchor Not Clickable in HTML

The Code Snippet

A Use Case for This Approach

Conclusion

Related posts:

CSS Only Animation: Zoom on Hover

DEMO: Zoom on Hover

HTML

CSS

Related posts:

CSS Only Animation: Image Swapping on Hover (Logo Swap)

DEMO: Swapping Logo/Image on Hover of Mouse

HTML

CSS

Related posts:

CSS Animation: Image Scrolling on Hover

DEMO: Mouse over to see the scrolling animation

HTML

CSS

Related posts:

How to Add Deny Access to the .htaccess File

1. Access your website’s .htaccess file

2. Add the deny access rule

3. Save the changes

Related posts:

HTML-CSS-JS: Simple Hamburger Menu Expandable

DEMO: How It Looks

HTML

CSS

JavaScript

Related posts:

CSS: Button Push Shadow Effect on Hover

DEMO: How It Looks

HTML

CSS

Related posts:

CSS: Use your desktop fonts to your website

CSS

Related posts:

YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area

How to remove the “You May Also Like” header on the sidebar widget YARPP Plugin for WordPress?

CSS

Related posts:

How to remove the “Related Posts” on YARPP Plugin for WordPress

How to remove the “Related Posts” on YARPP?

CSS

Related posts:

WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu

Related posts:

CSS: Make Perfect Responsive YouTube Embedded Iframed Videos

Make Youtube Video Responsive for All Screen Sizes without Leaving Black Areas

HTML

CSS

Related posts:

CSS: Crop Image Width or Height with CSS Only

BEFORE

CSS

AFTER

Related posts:

Use CSS to remove auto-generated empty <p> tags in WordPress

CSS: Hide/Remove Empty tags

Related posts:

Bootstrap Uneven Column Heights Issue in Layout Grid System

Related posts:

CSS Only: Pop-up Modal Lightbox on Page Load

Pop-up modal/lightbox on page load

HTML

Modal Headline

CSS

Related posts:

Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review

Related posts:

Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme

CSS: Hide/Remove Empty
tags