HTML/CSS div with text centered and resisable hover img

Question

so a friend and i are trying to put text hover an image and center it. we are using bootstrap so we have a div that is responsive and the image is too, so if i resize the page the image will be smaller but will be not centerer and not resized

so how can we make this right, resizable and centered horizontaly and verticaly??

http://s18.postimg.org/bw3itqktx/Captura_de_ecra_2014_03_30_a_s_19_42_22.png http://s18.postimg.org/gth3eumt1/Captura_de_ecra_2014_03_30_a_s_19_42_13.png

Answer 1

This is not a needed bootstrap solution, just a javascript solution. If we know the screen widths and heights by using window.innerHeight and window.innerWidth, we can just use window.onresize function () { Write what is need to place circle where you wanted based of inner width and inner height} Post a jsfiddle as Rob suggested and i will write you the needed javascript. It hard to do without having tags present. you can use document.getElementById and document.getElementByClassName to get the elements. and adjust them with style attributes. Good Luck! let me know if this helps. -Drew