I recently got a hand on this snippet Visit https://codepen.io/artistic18/pen/xyLmpq and thought of using this but the problem is that whenever I am trying to add some text it's getting added in the background and I am not able to add it above the last layer. Moreover Nav Bar animations are also not working.
Project Link- Visit https://github.com/Artistic18/MyPortfolio
Feel Free to edit it.
Add a paragraph at the end of the HTML (<p class="text...) and then in CSS : .text{ color:white;mix-blend-mode: exclusion;}
Related
I am building a Wordpress site for my nonprofit using the theme Avada and trying to implement some basic custom code.
I am using a "Modal Text / HTML Link" with an image to link to a modal (a pop-up: https://avada.theme-fusion.com/design-elements/modal-element/ and documentation: https://theme-fusion.com/documentation/avada/elements/modal-element/). To help make it clear to users that they can click the image to produce the modal, I want the opacity to change to 70% on hover over just that image.
I currently have the below in the "text/HTML" field, but it’s causing the hover opacity effect for all images on the page rather than just this one image. How can I amend this code to only cause the effect for the linked image? I know so little about coding but feel like it probably has something to do with divs??? I also get the sense I'm accidentlly mixing css and html.....I think I need the html for this field OR I can have just the image source code in the html, and then implement css.
{<img src="https://staging2.pvdwaterways.org/wp-content/uploads/2021/07/Lilly-Manycolors.png" />
}
img:hover {
opacity: 0.7;
}
Here's a screenshot of the interface with the code entered
Thank you!
As #daniel Theman told already in the comment, you can set a class to your element in element edit on the first page at the bottom and then you add the code to custom css tab in avada theme options. Give your element a unique name as class like hoverop and add this to you custom css tab in theme options:
.hoverop:hover{
opacity:0.7;
}
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
I made a transparent menu with white text on it and when we hover it the whole topbar becomes white and the text becomes invisible because of the same color.
I want to change the font colors to black of all the items in the columns when we hover anywhere on the top bar.
I am using elementor.
This is my website:
http://ha123.epizy.com
Please suggest if there is a plugin for this or any code. As a newbie I would be really happy to learn from you guys.
Thanks.
You could solve this using custom CSS code. If you use Elementor Pro, you could put this CSS inside of the plugin somewhere, but if not you can just add it either in the Customizer in Wordpress, or in a custom (child) theme.
Something like this could work in your case:
.elementor-widget-ekit-nav-menu:hover .elementskit-navbar-nav > li > a {
color: black;
}
You might actually also be able to solve this using Elementor itself in the style settings somewhere, but that depends on how everything is set up and which elements you are using.
I've been struggling with this post grid which I really like and want to use. But I dislike the gray part that appears besides te picture. Even the play button on a video post gets moved to the gray part instead of staying on the picture.
I am working with the newspaper theme using big grid 7, I have been trying to change the way the box works withing chrome's inspect but I can't figure it out.
Here is the website www.breakline.nl; the post grid is just above the footer (for now). You can clearly see what I mean when you zoom in or out while looking at the grid.
The above is right, but also you may add the below to complete remove the grey color from behind.
.td-big-grid-post .td-module-thumb{background:none!important;}
Generally go to the Appearance > Editor find the style.css file and at the bottom line around 33036 make a markup something like /*my own CSS*/ and add the below lines.
img.entry-thumb.td-animation-stack-type0-2 {
width:100%;}
.td-big-grid-post .td-module-thumb{background:none!important;}
Press Update file, and you are ready.
Credits go to #Relisora
add to your css file
img.entry-thumb.td-animation-stack-type0-2 {
width: 100%;
}
Topic explains it all. I've got it set as...
body{
background-image:url('images/bg.gif');
background-repeat:repeat-x repeat-y;
}
Can't seem to figure out why it's not rendering in the background. I'm new to wordpress themeing in general. Could anyone help me out? I've posted a link to the content in full below.
http://www.aidanchurch.com/blog/
In the style sheet, I see some garbage characters right in front of the
body{ background-image:url('images/bg.gif');
line in the css file. Those might be making the rendering skip the rule. I'd backspace and clean that up.
It looks like you background image is located here:
http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif
So first of all try an absolute address like so:
background-image: url('/blog/wp-content/themes/bloo_06/images/bg.gif');
However if that works, you really want a relative URL, so take a look at the directory structure of your theme and ensure the background image is indeed relative to the css file you have written that rule in, in the way you have written.
Check that you have uploaded the correct image to the correct place. When I tried to view the image I could see a very small and transparant image. http://www.aidanchurch.com/blog/wp-content/themes/bloo_06/images/bg.gif .