-
Posts
-
Hi Kriesi-Team,
in some topics the hover-style of the website http://peacheyphotography.co.uk/ got discussed. I tried the submitted solutions and some more efforts, but cannot get it work. Some of my quick-css-efforts look like this:
– – –
/* ———- MASONRY-GALLERY ———- *//* — 1. OVERLAY — */
.av-masonry-entry:before {
content: attr(title);
background: #00b5f1;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
text-align: center;
line-height: 180px;
opacity: 0;
font-weight: bold;
font-size: 24px;
}.av-masonry-entry:hover:before {
opacity: 0.5;
}/* — 2. TEXT-ELEMENT — */
.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
position: absolute; bottom: 40%; text-align: center;
}.main_color .container .av-inner-masonry-content {
background-color: rgba(0, 0, 0, 0.0);
}.main_color .av-inner-masonry-content {
background-color: rgba(0, 0, 0, 0.0);
}.main_color .container .av-masonry-entry .avia-arrow {
background-color: rgba(0, 0, 0, 0.0);
}.main_color .avia-arrow {
background-color: rgba(0, 0, 0, 0.0);
}.av-masonry-entry .av-masonry-entry-title {
color: #fff; font-size: ;
}/* — 3. NO ZOOM — */
.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
-webkit-transform: none;
-moz-transform: none;
transform: none;
opacity: 0.5!important;
}– – –
The result should be similar to http://peacheyphotography.co.uk/ , but contains a lot of errors. Can you have a look about it please…
Thanks and best regards,
ChristianHi!
You are pretty close, try changing the overlay part to this:
.av-masonry-entry:before { content: attr(title); background: #00b5f1; position: absolute; width: 97%; height: 96.2%; z-index: 1000; text-align: center; line-height: 180px; opacity: 0; font-weight: bold; font-size: 24px; }Cheers!
JosueHi Josue,
thanks for your help! Anyhow i don´t get the masonry-portfolio work as i would like to (http://peacheyphotography.co.uk):
1. When using “Adjust to content width” the masonry builds two equal columns and doesn´t show the portfolio as in the link above.
2. For the smaller or portrait pics the overlay is much too big (width and height), for the big pictures the width doesn´t fit exactly.
3. The font appears behind the overlay, but should be in front of it.Do you have any idea how to reach a similar result as on http://peacheyphotography.co.uk ?
Best regards,
ChristianHey!
1-2. Try adjusting the image setting for the masonry in the element options.
3. Add this:.av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content { z-index: 1000; }Regards,
JosueHi Josue,
it doesn´t work…neither i´m able to get the elements in the right sizes (now they are scaled up), nor the overlay fits exactly, nor the font is the front element and 100% visible…
Is there any chance to do it like the example above or your site http://kriesi.at/themes/enfold/shortcodes/masonry-gallery , but with a color-overlay with text?
Do you have another tutorial than this: http://vimeo.com/77433498, that declares how to get the masonry look like your site (which options, pictures sizes, etc.)?
Thanks, Christian
Hi!
The images on the masonry demo are 1030x700px in size and switch the size for portrait images. If you want to manually create portrait and landscape images, use the Perfect Manual Masonry. Manually control the height and width of entries by adding either a “landscape” or “portrait” tag when creating the entry.
Cheers!
IsmaelHi Ismael,
thank you for the reply:
-> we used the “Perfect Manual Masonry”, and the entries were tagged with “portrait” and “landscape”. That doesn´t work at all !!!
-> The size of the images in can see in the demo are 705 x 470 / 449 x 705 ???
-> The only things that works tolerably is the “Flexible Masonry”, but only with two columns. No idea how to set the options and image sizes to get a result like http://peacheyphotography.co.uk
-> However viewports with more than 1.140px width display the images wrong sized…It would nice to have a documentation “how to use the masonry portfolio”!
Now the topic gets rather confused and achieves no results… so please let´s look back to the beginning of the topic:
We would like to display the portfolio like on this site: http://peacheyphotography.co.uk
-> How to set the images sizes is incomprehensible! please help us out, i think we are not the only participants with problems to use the masonry…
-> The overlay doesn´t really fit, are the no better options to do a colour-overlay?
-> The titel-/font-problem still exits…Any solutions or not possibility to do like that?
Thanks, Christian
Hi,
Can you please create us an administrator account? post it here as a private reply.
Regards,
JosueHi!
You can add this on Quick CSS or custom.css if you want to increase the masonry columns:
#top .container .av-masonry-entry { width: 25%; }Cheers!
IsmaelHello Ismael, hello Josue,
thanks for the tip, it works for more columns. The problems of post #321825 still exist.
So please tell me, if there is any solution or not…
You still need the administrator account?
Cheers!
Christian… problem of the “columns-solution” is the responsive behaviour. The portfolio gets little when decreasing the viewport size… not fine. Your Website presents a nice masonry portfolio here: http://kriesi.at/themes/enfold/shortcodes/masonry-gallery/
Cannot you tell the adjustments to get it work like this and how to combine it with a colour overlay with centered text?
Cheers,
ChristianHey!
Please add following code to Quick CSS
@media only screen and (max-width: 990px) { #top .container .av-masonry-entry { width: 49.80% !important; }}Regards,
YigitHello Ismael, hello Josue, hello Yigit,
the problems of the posts #320176 and #321825 still exist. The solutions don´t perform well and your answers are very fragmented…
The topic included following issues:
1. How to realize a multi-column (!) masonry-portfolio as on your website http://kriesi.at/themes/enfold/shortcodes/masonry-gallery or as here: http://peacheyphotography.co.uk
2. How to set the images sizes and other adjustments to get a highquality masonry-portfolio?
3. How to realize a perfect fitting colour-overlay?
4. How to get a clean font solution (font in front of the overlay)?Cheers,
ChristianHey Christian!
Seems you figured out 1 & 2, regarding 3 & 4 i changed the overlay code to:
.av-masonry-entry .av-inner-masonry:before { content: attr(title); position: absolute; z-index: 1000; text-align: center; width: 100%; height: 100%; -webkit-transition: all linear 0.2s; -moz-transition: all linear 0.2s; transition: all linear 0.2s; } .av-masonry-entry .av-inner-masonry:hover:before { background: rgba(0, 181, 241, 0.7); }Best regards,
JosueHi Josue,
it works great on the desktop now. Lot of thanks!
On mobile devices and tablets the headlines appear on the images and not above the color overlay. Any solutions herefore?
Best regards,
ChristianHey!
You can use this to adjust the position of the headlines on mobile device:
@media only screen and (max-width: 767px) { .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content { position: absolute; bottom: 0; } .av-masonry-entry .av-masonry-entry-title { line-height: 1.1em; font-size: 11px; } }Regards,
IsmaelHello Ismael,
ok, but the problem is, that the headlines appear on the images and not on the overlay. So when you open the site you see the masonry-images with the headlines on it. But the headlines should appear with the hover (on the overlay).
Best regards,
ChristianHey!
There is no hover on mobile devices, i’d suggest showing the overlay by default:
.avia_mobile .av-masonry-entry .av-inner-masonry:before { background: rgba(0, 181, 241, 0.5); }Cheers!
JosueHi Josue,
wouldn´t there be the possibility of a “two-time-touch-event” or like http://peacheyphotography.co.uk to fade in the hover and simultaneously go to the link.
Best regards, Christian
Hey!
Yes, it is possible but that particular feature is beyond the scope of support. Please visit Envato Studio or Werkpress for further customization. You can also vote or request the feature on our Feature Requests page.
Regards,
Ismael
- You must be logged in to reply to this topic.