-
Posts
-
I am new to css and coding… i am attempting to put a picture with text overlay that fades on hover. Here is the code I have put together so far? Is there anyway to clean this up? Also, I would like to bold the text and have round corners on the image? Any help is GREATLY appreaciated!
<!DOCTYPE html> <html > <head> <style type=”text/css”> .pic{ width:250px; height:250px; opacity: 1; filter: alpha(opacity=100); background: url(http://tourverse.com/wp-content/uploads/2016/02/West-Oahu-Turtle.jpg) no-repeat; } .pic:hover { opacity: 0.3; filter: alpha(opacity=30); } </style> </head> <body> <div class=”pic”> </div> </body>
<DIV STYLE=”position:absolute; top:200px; left:5px; width:250px; height:25px”>
<CENTER><FONT SIZE=”+4″ COLOR=”ffffff”>OAHU</FONT></CENTER>
</DIV>I would also like to make the spacing for four columns with a very small gap between each picture. Thank you for taking the time to help me!
Hi there,
Thanks for writing in.
Would you mind providing the site’s URL where you wish to add it? How about using section’s column and add background image?
You may also provide a design mockup of what you wish to achieve.
Thanks!
http://tourverse.com/home/oahu/
also for some reason with this coding, the picture auto copies (even if I change the background url)
An example of what I am looking to do can be found on this site: (the four images under “Find a Tour by Destination”) http://adventure-tours.themedelight.com/
Hi there,
You can add your custom CSS under Custom > CSS in the Customizer. No style tag needed. Just place the raw CSS.
Hope this helps.
Cheers!
