1

I am using a theme from bootstrap hunter for my project which has a profile page, link below.

Demo Profile Page

Now the profile page has picture. I have written the code that if anybody clicks on the image, it will open up a modal to upload a new picture but now I want that the image is clickable and on hover shows a camera icon from the font awesome library, but I can't seem to accomplish this.

I add anchor tag around the img tab but then the styling would mess up, I think because the CSS in the theme works on the child img of the div.profile-pic and when I wrap the img tag inside the anchor, it messes it.

Other than that I tried this for the icon:

img#photo:hover:before{
    font-family: 'FontAwesome';
    content: '\f01a';
  }

The icon code might not be for camera but none the less nothing shows up. I don't know why. How do I place the camera icon on the picture and make it clickable?

Rohan
  • 11,041
  • 19
  • 65
  • 131
  • 1
    I was just about to add an answer, but it's marked as duplicate which I feel is incorrect, the questions are different. Here is a JSFiddle: http://jsfiddle.net/ts6vwmn6/ – Tony Barnes Mar 25 '15 at 11:42
  • Even I don't get why this was marked duplicate. It is slightly different. Anyway, your fiddle works like a charm. I adjusted the position according to my needs and wrapped the whole div in an anchor tag. Thank you so much. :) – Rohan Mar 26 '15 at 09:36
  • Glad it helped! Shame I can't add as a proper answer. – Tony Barnes Mar 26 '15 at 10:17

0 Answers0