By wayver on

How do I overlay text or graphics on a photo block. (Landing page, Photo block, etc.)
example: http://www4.mcdonalds.ca/mccafebakery/?_ga=1.123139659.1938961322.148320...

⋅ Categories: Drupal 7.x

Comments

sprite’s picture

sprite commented

The URL below contains an example of images in a carousel with text overlays and masks.

The implementation involves theme support and CSS support.

http://demo.morethanthemes.com/bestbrand/commerce-default/?q=node/18

The guys above sell their code/sites as products for sale. Detailed study of their product theme and CSS files provides answers to your question, which cannot otherwise be answered in a sentence.

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

wayver’s picture

wayver commented

I'm looking more for whats on the opening page of this site not a sales pitch.
example:https://www.drupal.org/

sprite’s picture

sprite commented

I am not associated with more than themes, but I am a customer of theirs.

I am seriously trying to help you learn how its done.

1. add theme file support for the components
2. add CSS for display of the overlay components.

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

sprite’s picture

sprite commented

Figure out a lot for absolute free ...

By installing the firefox firebug and web developer add-ons.

If you know anything about CSS you will be able to see and figure out the CSS using those tools.

For example, in firefox, hit F12 to activate the firebug website developer/debug window.

Using the element selector tool, successively select the relevant overlay elements that are visible at the example link(s).

The CSS for those elements will be displayed in the developer info windows.

For example, looking at the drupal.org front page using firebug, it is apparent that they have implemented it with a drupal fieldable panels pane, along with CSS styling. Studying their CSS provides insights.

Firebug can be used to study the html and CSS contents of any website page. It is not Drupal specific.

Meanwhile ...

Please don't bite the hands of people who provide free help here.
If I didn't care, I could just ignore you, and let you fend for yourself.
Being thankless isn't likely to inspire people to help you.

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

sprite’s picture

sprite commented

The free:

http://www.w3schools.com/

website is a great resources, and that is a plug.

Here are two specific educational resources that specifically answer your question.

http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency

http://www.w3schools.com/howto/howto_css_image_overlay.asp

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

sprite’s picture

sprite commented

By the way, you are a fool if you don't think you can learn a lot about building Drupal sites from the profile/theme/distribution products that the guys at MTT create.

With that, I've provided you with plenty of free help, especially since I'm just a volunteer who donates a little of my time to this website.

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

sprite’s picture

sprite commented 
<!DOCTYPE html>
<html>
<head>
<style>
div.customimage {
  background: url(image.jpg);
  border: 1px solid black;
}

div.overlaybox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); 
}

div.overlaybox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="customimage">
  <div class="overlaybox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...

wayver’s picture

wayver commented

Just for your info I solved it 5 min after the first post.

sprite’s picture

sprite commented

Don't ever expect me to respond to any questions about Drupal that you many have in the future.

spritefully yours
Technical assistance provided to the Drupal community on my own time ...
Thank yous appreciated ...