Creating Customer Quote Overlays

Showcasing your service or product is an absolute given on most websites. Often, this presentation can come in the mold of customer or client quotes. By providing direct quotes from actual customers, you legitimize your brand while simultaneously displaying an actual use-case where your product/service was a distinct solution.

Within web design, there is a variety of methods you can use to display these quotes. One such method is to show the quote as an overlay on top of specific client logos. This technique has the added benefit of being able to condense a number of customer quotes into a defined space all without compromising your overall design.

Another added benefit with this method is that it is all accomplished with CSS. No JavaScript is needed, making the following tutorial as lightweight as possible. The CSS increases the opacity of the quote content upon hover while simultaneously creating a transition effect for the logo. When put together, the total markup produces a minimal but effective customer quote section.

Below is the HTML and CSS required a for customer quotes to appear as an overlay. Customize the colors, text, and logos to fit your needs!

Step 1 - quote-overlay.html

Copy and paste the code below into your web page

Step 2 - quote-overlay.css

Download the CSS below and include it in your web page

Step 3 - Include the following resources on your web page

The above HTML, CSS, and includes should produce effective customer quote overlays. Bootstrap handles the column formatting for a variety of devices while custom CSS produces all of the necessary transition effects. Swap out the logos for those of your actual customers and add distinct quotes related to your service or product. Enjoy!