-
Posts
-
Hallo,
im a very big fan of enfold and im trying to realize all websites with your template first if possible – because it is the best site builder on the market for my opinion.
now I have a little design issue.
how can I display a design like this in the link below? ( only the header section )
and is there a way to display these kind of animated lines on a picture in enfold ?thank you very much and best regards.
Hey B2LFilms,
Yes, there are buttons and captions that slide-in in the sliders in Enfold and in the Layer Slider.
The Layer Slider here
https://kriesi.at/themes/enfold-2017/ and the slider hereThis part can be implemented too.
Best regards,
VictoriaHallo
thanks for the reply,
no I mean this animated lines on the to pictures under the header slider – I want that animation on all my pictures – how can I do that?
how can I display the header part in two colors like in the sample?
and how can I place the slider a little bit to the right?thank you and best regards
To your image hover effect.
i did a custom-class to a parent container to the image: hoverstyle1In this case – if you want different selectors ( like categorie links or portfolio links etc. ) there must be analog css rules.
The point is to understand what is done – that is a good starting point.
The “framed on hover” element is styled via pseudo-containers ( before and after) – these containers got a border ( border left/right on after – and border top/bottom on before container )
these containers itself has no background-color – but borders – and are scaled to zero.
on hovering these container grow to 100% ( scale(1))see result here: https://webers-testseite.de/hover-images/
here is the css code ( i did set the overlay to display none)
.hoverstyle1 .image-overlay { display: none !important; } /* hover styling images */ .hoverstyle1 a.avia_image:before, .hoverstyle1 a.avia_image:after { content: ''; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; pointer-events: none; background: transparent; width: auto; height: auto; z-index: 10; } .hoverstyle1 a.avia_image:before { border-top: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); } .hoverstyle1 a.avia_image:after { border-left: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); } .hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:before, .hoverstyle1 .avia-image-overlay-wrap:hover a.avia_image:after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }thank you so much for the answer,
but I don’t understand it right
the framed on hover effect is on the container which uses borders to scale from 0 to 100 – ok
but where do I set the css code ? in quick css or directly in editor ?thank you
best regardsThe css code comes to quick css – but read carefully – there is a custom-class to set for a parent-element of the images.
If you like every image in a color-section with a link to have that hover style – give the class to the color-section.
If you only want it for some images give the class to the image alb itself.If you like to have that style for Masonry Entries – we had to change the code.
It was important for me that you understand the procedure and then transfer it yourself.
So you’ve got two containers, so to speak, lying on top of each other.
One has a height of 0 and grows in the Y-direction – the other one has a width of 0 and grows in the X-direction.If you are not able to transfer it to other containers – tell me – i will help you then –
it is easier to do it on a live site – so if you can make the page public tell me.Hallo again,
@guenni007
thank you so much – your explanation helped me so much – I got it!here you can take a look, im still playing around with the design – http://jenni.b2lmedia.com/?page_id=1107
is there a way to change the background color from the burger menu and the social icons in the header ?
may I move a slide show ( full width ) to the left so that the background shows up on the right?thank you and best regards
first: the burger button is covered by the social bookmarks and because it has a z-index of 150 and your burger has 100
the active click area of the burger is less than it should. ( only left side is active )let the margin left be on default and set the padding lower:
#top .social_bookmarks { margin: 0; } .fallback_menu + .social_bookmarks { padding-left: 9px; }have a look what happens if we add a pseudo container to header_main:
#header_main::before { content: ''; position: absolute; width: 150px; height: 40px; right: 14px; left: auto; top: 50%; transform: translateY(-50%); background-color: #fff; border: 14px solid #d1b1a7; }you had to adjust this in media querries to your needs ( the social bookmarks are gone if the screen is narrow )
on middle wide screen a height of 30px is enough and on small mobile screens you had to make the width smaller just to surround the burger.just a bit like this on both:
#top .social_bookmarks { margin: 0; } .fallback_menu + .social_bookmarks { padding-left: 9px; } #header_main::before { content: ''; position: absolute; left: auto; top: 50%; transform: translateY(-50%); background-color: #fff; border: 14px solid #d1b1a7; } #header_main::before { width: 145px; height: 40px; right: 5px; } @media only screen and (max-width:767px) { #header_main::before { width: 140px; height: 30px; right: 20px; } } @media only screen and (max-width:479px) { #header_main::before { width: 50px; height: 30px; right: 5px; } }Sorry, I forgot to thank you for the help.
I got everything to work!
again, thank you so much!
great support
- The topic ‘Design & Pic effect’ is closed to new replies.