+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: [Blogger.com]help to needed to make image overlay (/showthread.php?tid=4323088)
[Blogger.com]help to needed to make image overlay - cracker007 - Jul 5, 2014
Demo : http://netstrikerz.blogspot.in/
I want to put the second picture ( special offer) exactly over the first mobile phone picture.
Can anyone help me to do this ?
Thanks
* - JumpWar - Jul 5, 2014
You could use "position: absolute". This style attribute makes an element position itself relative to the first parent with "position: relative" and outside of all other styling, above other elements.
Put bot pictures in a wrapper, make that "position: relative" and set "top: 0px" and "left: 0px" on the second image. If they have the same size they should now be on top of one another.
Hope this helps you solve your problem.
EDIT: Sorry, misunderstood you question....
* - Naveen - Jul 5, 2014
(Jul 5, 2014 04:10 AM)cracker007 Wrote: Demo : http://netstrikerz.blogspot.in/
I want to put the second picture ( special offer) exactly over the first mobile phone picture.
Can anyone help me to do this ?
Thanks
So these three images in single blog post right? then you can drag the second image to first position easily. If it not working Upload images from your blogger account instead of copying or delete all the images and copy one by one. This definitely helps you. 🤝
* - cracker007 - Jul 5, 2014
(Jul 5, 2014 05:54 AM)JumpWar Wrote: You could use "position: absolute". This style attribute makes an element position itself relative to the first parent with "position: relative" and outside of all other styling, above other elements.
Put bot pictures in a wrapper, make that "position: relative" and set "top: 0px" and "left: 0px" on the second image. If they have the same size they should now be on top of one another.
Hope this helps you solve your problem.
EDIT: Sorry, misunderstood you question....
Same happens to me, I don't understood your answer completely.
I want to put one image over another (ie: second image over the first image in above website)
* - Naveen - Jul 5, 2014
(Jul 5, 2014 07:03 AM)cracker007 Wrote: Same happens to me, I don't understood your answer completely.
I want to put one image over another (ie: second image over the first image in above website)
Have you tried what i said in above post??
* - cracker007 - Jul 5, 2014
(Jul 5, 2014 06:01 AM)Naveen Wrote: So these three images in single blog post right? then you can drag the second image to first position easily. If it not working Upload images from your blogger account instead of copying or delete all the images and copy one by one. This definitely helps you. 🤝
sorry i need to put Overlay image over image.(second one above first image ...keep third one as same.)
* - SavageBoys - Jul 6, 2014
Do you mean completely covering the image so that when a user hovers over it the image underneath is shown? Or as a semitransparent overlay so you "see" both images just overlayed?
If you just want the first you would set the special offer as the main image and switch the image out on hover. (there are better more maintainable ways)
If you want the special offer image overlayed you can use :after and adjust the opacity.