FullScreen Image

In this blog I am going to show you how we can make a image cover whole screen and it is also going to be to responsive.This tutorial is going to pretty short the prerequisites are HTML & CSS. Inside our HTML we need to two elements one 'parentDiv' and inside it 'img'. Add whatever class you like to add to 'parentDiv' and also any image you wish to add onto your page. Now inside our CSS we need to add 'width: 100%' & 'height: 100vh' to our 'parentDiv' so that it covers whole screen no matter screen size. We also need to add some properties for our image, 'width' & 'height' to '100%' so that it utilize whole space of its parent div and most important property 'object-fit: cover'

ToolTip

A tooltip is a short message that appears when a user interacts with a specific element on a website or in a mobile app. It can be a pop-up box or overlay that provides additional information about the element. Tooltips can appear when a user hovers over an element, presses and holds, or lands on a page. <h3>Common uses of tooltips:</h3> • Labels: Providing short information about icons or symbols. • Definitions: Explaining terms or acronyms of words or sentences. • Help: Offering brief instructions or guidance. As we have seen tooltip is very useful specially when we have huge and complex project which contains lot of elements and data. There are many libraries which provide tooltips like Bootstrap & Material UI but here we are going to learn creating tooltip with just html & css. <h3>Creating a Tooltip with HTML and CSS.</h3> <h3>HTML</h3> We will create a div with class tooltip. Inside it we will create two elements 1. span, when hovered will trigger the tooltip. 2. div with class tooltipText which will contain actual tooltip text/contain. <h3>CSS</h3> • We will add <span>position: relative;</span> to tooltip which will help us to position the tooltip absolutely within its parent. • Now add <span>position: absolute;</span> to tooltipText which positions the tooltip relative to its parent & also add <span>display: none;</span> because by default tooltip will be hidden (you can adjust position of tooltip by top, bottom, left & right). • We only want to display tooltip when we hover on text for that we for that we will add this property <span>.textDiv:hover .tooltip { display: block; }</span> Below is final code and output. <iframe height="300" style="width: 100%;" scrolling="no" title="Tooltip with Html &amp; Css only." src="https://codepen.io/Meet-the-reactor/embed/yLdKQOw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/Meet-the-reactor/pen/yLdKQOw">Tooltip with Html &amp; Css only.</a> by Meet (<a href="https://codepen.io/Meet-the-reactor">@Meet-the-reactor</a>) on <a href="https://codepen.io">CodePen</a>. </iframe> You can customize the appearance and behavior of the tooltip by modifying the CSS properties.