To display camera icon hover image use this font awesome
<i class="fa fa-camera" aria-hidden="true"></i>
If you need font awesome cdn link then use it:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
Example CSS and HTML code:
HTML:
<div class=""> <div class="overlay"><i class="fa fa-camera"></i></div> <p class="image_avatar" ><img id="myImg1" src="my_image.jpg" alt="" class="image_border"></p> </div>
CSS:
<style> .overlay { position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 2; cursor: pointer; transition: opacity 5s ease-out; opacity: 0; } .image_avatar { padding: 30px 0px; text-align: center; margin: 0; } .image_border { border: 5px solid #fff; width: 275px; } </style>
Question and answer is powered by AnsPress.io