Adaptations! - Post ID 239386

User 2674529 Photo


Registered User
65 posts

Good morning! I have been having great fun playing with RLM (and the free trial of MenuBuilder!), have sort of reconstructed our site to go responsive although a lot of additional work is required but thought I would have a shot at adapting some of the elements in our current site to see if they work.
One of them is the photo masks - an image is placed in a container and on mouseover it swirls away to reveal a mask giving some brief info on dog sports, etc. We also have a memorial on there for one of our friends which works in the same way and that's the one I have been testing on. Although changed from pixels to percentages (and working okay), I cannot seem to get the main image or the mask to fit the container - I've tried various things, finally took off the max-width, etc., and exported again. I think I am missing something really obvious but wondered if you good people would be kind enough to take a look for me?
You will find it under southeasterndog.coffeecup.com/tests/links.html. There is another page called MasksWorkingPage.html which shows how I want it to display. Any advice you could give I would be very grateful for!
Cheers all
Chrissie
User 187934 Photo


Senior Advisor
20,181 posts

Hi Christine, this is for the test/links.html page
Looks to be line 148 of the custom.css
.view-fourth h2 {
background: none repeat scroll 0 0 transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
margin: 20px 40px 0; // reduce the 20px top margin to 5px
opacity: 0;
transition: all 0.5s ease-in-out 0s;
}


Then you may want to play with line 94.
.view p {
color: #fff;
font-family: Georgia,sans serif;
font-size: 12px;
font-style: italic;
padding: 10px 20px 20px; //adjust top and bottom padding
position: relative;
text-align: center;
}


then line 103
.view a.info {
background: none repeat scroll 0 0 #000;
box-shadow: 0 0 1px #000;
color: #fff;
display: inline-block;
padding: 7px 14px; // adjust top padding
text-decoration: none;
text-transform: uppercase;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2674529 Photo


Registered User
65 posts

Eric, many thanks! Sometimes you just plain can't see the wood for the trees.... Appreciate your time and effort, mate.
Thanks again.
Chrissie :-)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.