In this task, we make a flexbox having flexibility and make a Pop up when the cursor is on it Through HTML and CSS. when the cursor is on the picture it gives a pop-up WHich time to your set on it.
Like Input:
Code:
<!DOCTYPE html><html><head><title>FlexBox</title></head><body><style>#flex-container{display: flex;flex-flow: row wrap;justify-content: center;}img:hover{transform: scale(1.2);transition: all 2s;}.flex-item{border: 2px solid black;margin: 15px;}h1{border-bottom: solid;width: 180px;}</style><h1>Wild Life</h1><div id="flex-container"><div class="flex-item" ><img src="lion.jpg" style="height: 200px;width: 350px;"></div><div class="flex-item" ><img src="panda.jpg" style="height: 200px;width: 350px;"></div><div class="flex-item" ><img src="cheetah.jpg" style="height: 200px;width: 350px;"></div><div class="flex-item" ><img src="eleph.png" style="height: 200px;width: 350px;"></div><div class="flex-item" ><img src="markhor.jpg" style="height: 200px;width: 350px;"></div><div class="flex-item" ><img src="zebra.jpg" style="height: 200px;width: 350px;"></div><br><button><a href="WildLife.htnl"></a>WildLife</button></div></body></html>
No comments:
Post a Comment