-
Posts
-
Hi support staff,
Let’s say I create two columns beside one another. I want one column to contain text and a description and the other column to contain an image that slides in.
Now the column with the image that slides in, I want it to not be restricted by the column dimensions but I want it beside the text of the other column. Also would be neat to be able to do the same with an advanced slider.
So what I mean by this furthermore, is that it want the picture to not be confined by anything. It would be visible outside of the page borders even. I want to make the image in photoshop in the size I want it, and I want it to display in full the size I made it and stay beside the text description.
I see many websites do this. I’m wondering if this is possible with the enfold theme for an average user?
Thank you.
Hey,
You can add a unique selector for each Avia Elements. Edit functions.php, find this code:
if(isset($avia_config['use_child_theme_functions_only'])) return;Below, add this code:
add_theme_support('avia_template_builder_custom_css');Edit any avia elements like the Image element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-image.
You can add something like this on your custom.css or Quick CSS to move the image around.
.avia_image.awesome-image {
position: absolute;
left: -50px;
top: -100px;
}Regards,
Ismael
Hi Ismael!
This solves the ability for the picture to float above other objects which is great. But the image is still confined to the dimensions of the half column?
Hi again Ismael,
This doesn’t seem to be working when I add more than one picture,
I’ll make custom css class such as these:
mainpage-imageone
mainpage-imagetwo
mainpage-imagethree
Then I will assign the three images these in the quick CSS:
.avia_image.mainpage-imageone {
position: absolute;
left: -50px;
top: -100px;
}
.avia_image.mainpage-imagetwo {
position: absolute;
left: -50px;
top: -100px;
}
.avia_image.mainpage-imagethree {
position: absolute;
left: -50px;
top: -100px;
}The first image functions and displays. The second and third images don’t display at all, I even tried chaning the name of the Custom CSS Class.
Hey,
Can you give us a screenshot of what you’re trying to do? And a link to your website will help.
Regards,
IsmaelIsmael,
I can’t link you the website and don’t have time to make a screenshot sadly. (I know, I know)
You were pretty much on point with what I wanted to do. You code works fine but when I make more than one Custom CSS Class for the quick CSS, my images vanish except the first one.
So I have three sections on the same page, in each of these sections there is a paragraph of text and a header in a 1/2 column. These three sections are separated by default Hr dividers. I essentially want three different pictures that will slide in beside the paragraphs of these three sections. These pictures will be large and for stylistic reasons I want them to align with the text but at the same time overlap the Hr dividers if need be. Your solution above seemed to work for this after I added a z-index.
My question to you is can I accomplish this by placing the image another 1/2 column beside the 1/2 column with the paragraph? And if not (manually adjust left and top position), how come I can’t get all three pictures to display if I assign them different CSS Classes and give them separate properties in Quick CSS?
Hope that made more sense.
If you want to see an example, http://www.apple.com uses this a lot.
Hi Ismael,
This method works but it still constrains the image size to the column. Is there any way around that?
Hello!
You would need to make each image positioned absolutely and then position them outside of that. Its an odd css issue which is really going to take a bit of trial and error.
A good source for getting it exactly as you want it is StackOverflow but customizing the layout and the css needed for it is a good but beyond what we can assist with via support as, since i mentioned before, will take a lot of trial and error and getting it customized to how you want.
Regards,
Devin
- The topic ‘Allowing images to float above and not confine.’ is closed to new replies.