CODEWITHSUNDEEP
htmlcssruby-on-railsruby-on-rails-4
Mike.Whitehead
Mike.Whitehead

Reputation: 818

Frosted glass effect using CSS for h2/h3 background area

I'm currently styling an events site and for the index page - representing each event I have an image with the event title and event date sat on top of the image. I currently have these in h2/h3 brackets, plain white text with a solid color background. I want to change the background to a 'frosted glass' effect using CSS. How do I do this?

Here's my current view Rails/html code and CSS styling -

index.html.erb - events

<div class="container">
<div class="row">
    <div class="col-md-12">
        <ul>

                <% @events.each do |event| %>
            <li class="events"> 
                    <%= link_to (image_tag event.image.url), event, id: "image" %>
                <div class="text">  
                    <h2><%= link_to event.title, event %></h2>
                    <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3>
            </li>       
                <% end %>
                </div>

        </ul>                           
    </div>
</div>

events.css.scss -

li.events { 
width: 350px; 
height: 350px; 
float: left;
margin: 20px;
list-style-type: none;
position: relative; 

 }

 li.events img { 
width: 100%; 
height: 100%; 
border-radius: 25px;



 }

div.text  { 

background: transparent; 
padding: 25px; 
position: absolute; 
bottom: 15px;
left: 25px; 

}

div.text a {
text-decoration: none;
color: #FFFFFF;
padding: 5px;   
text-align: center;
border-radius: 15px;
background-color: #FF69B4;


     }

I imagine the image looking a bit like this (not the best screenshot - sorry). Frosted Glass background effect

Upvotes: 0

Views: 2274

Answers (3)

Mike.Whitehead
Mike.Whitehead

Reputation: 818

Many thanks for all the responses - I've found a solution here - 

div.text a {
text-decoration: none;
color: #FF69b4;
font-weight: bolder;
padding: 5px;   
text-align: center;
border-radius: 15px;
background-color: rgba(255,255,255,.6);
-webkit-backdrop-filter: invert(10px);


}

Upvotes: 0

ConnorCMcKee
ConnorCMcKee

Reputation: 1645

From what I can tell, the only part of this with which you need help is making your solid background color look like frosted glass. That is a somewhat subjective criteria, but based upon the image you've provided, all you really need to do is make the background color semi-transparent. The way to do that would be to get the rgb value of your color, and pass it like so:

background-color: rgba( 255, 255, 255, 0.5 );

Upvotes: 1

Seika85
Seika85

Reputation: 2021

I just googled "frosted glass effect" and the second result looked promising: https://css-tricks.com/frosting-glass-css-filters/. It links to codepen: http://codepen.io/adobe/pen/40cd4258f2d72a60f37a5e2f47124b7e

They use a blurred image for the blurry effect. Depending on the browsers you need to support you can use the CSS property filter instead. That way you only need to load the image you want to apply your effect to and not a second with the applied effect.
I made a fiddle for you: https://jsfiddle.net/hwvpch0u/1/

Basically it's mostly all about the following CSS:

.mycontainer {
    background-image: url('<my-image>');
    background-size: cover;
}
.mycontainer .glass {
    /* all the properties for the "stand out" container */
}
.mycontainer .glass::before {
    /*background-image: url('<my-blurry-image');*/ /* see: http://caniuse.com/#search=filter */
    background-image: url('<my-iamge>');
    -webkit-filter: blur(8px); /* blur only of original image is used instead of blurry */
    filter: blur(8px); /* blur only of original image is used instead of blurry */
    background-size: cover;
    opacity: 0.4;
}

 

In your additionally added screenshot, I cannot see a blur effect. So if you don't need that, you can just apply an background-color having an alpha channel to the "frosted" container above the image, like:

.mycontainer .glass {
    background-color: rgba(255, 255, 255, 0.5);
}

Upvotes: 0

Related Questions