Blog

How to create an image magnifier glass using JavaScript and CSS

How to create an image magnifier glass using JavaScript and CSS Step 1 : Adding HTML <h1>Image Magnifier Glass</h1> <p>Mouse over the image:</p> <div class=”img-magnifier-container”> <img id=”myimage” src=”https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg” width=”600″ height=”400″> </div> Step 2 : Adding  CSS * {box-sizing: border-box;} .img-magnifier-container { position:relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; […]

How to Create Responsive Testimonials with CSS

How to Create Responsive Testimonials with CSS Step 1 : Adding HTML <h2>Responsive Testimonials</h2> <p>Resize the browser window to see the effect.</p> <div class=”container”> <img src=”https://adaptabiz.com/wp-content/uploads/2020/10/procreator.jpg” alt=”Avatar” style=”width:90px”> <p><span>Chris Fox.</span> CEO at Mighty Schools.</p> <p>JLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text […]

How to Create a “Read More – Read Less” button with JavaScript.

How to Create a “Read More – Read Less” button with JavaScript. Step 1) Add HTML: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id=”dots”>…</span><span id=”more”>erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue […]

How to create a Scroll indicator with CSS and JavaScript

How to create a Scroll indicator with CSS and JavaScript   Step 1) Add HTML: <div class=”header”> <h2>Scroll Indicator</h2> <div class=”progress-container”> <div class=”progress-bar” id=”myBar”></div> </div> </div> <div class=”content”> <h3> Please Scroll Down to See The Effect</h3> <p>This progress bar will <b>show how far a page has been scrolled</b>.</p> <p>It also <b>works when you scroll back […]

How to Create Zooming Effect on Hover Using CSS

How to Create Zooming Effect on Hover Using CSS Step 1: Adding HTML <h1>Zoom on Hover</h1> <p>Hover over the div element.</p> <div class=”zoom”></div> Step 2 : Adding CSS * { box-sizing: border-box; } .zoom { padding: 50px; background-color: blue; transition: transform .2s; width: 200px; height: 200px; margin: 0 auto; } .zoom:hover { -ms-transform: scale(1.5); /* […]

How to copy text to the clipboard with JavaScript

How to copy text to the clipboard with JavaScript Step 1) Add HTML: <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p> <input type=”text” value=”Hello World” id=”myInput”> <div class=”tooltip”> <button onclick=”myFunction()” onmouseout=”outFunc()”> <span class=”tooltiptext” id=”myTooltip”>Copy to […]

How to create a Sticky Menu with CSS and JavaScript

How to create a Sticky Menu with CSS and JavaScript   Step 1) Add HTML: Create a navigation bar: <div class=”header”> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div id=”navbar”> <a class=”active” href=”javascript:void(0)”>Home</a> <a href=”javascript:void(0)”>News</a> <a href=”javascript:void(0)”>Contact</a> </div> <div class=”content”> <h3>What is Lorem Ipsum?</h3> <p>Lorem Ipsum is simply dummy text of the […]

Scroll to top