I am working on this wordpress site using the Bridge theme (by Qode): http://www.musegroupreno.com/plp/
There are images in the smaller squares on the home page that have a hover effect. I am using the Masonry Gallery (a Qode addon to the Visual Composer plugin) that makes me set each square/rectangle type to either have a solid overlay/background color or not. All small squares (text and image) are the same. The problem is that we want the text squares to have a pink background and the image squares to not transition to pink on mouse hover.
We want small square images to look and act like the tall rectangle does where if you hover over it, nothing changes. This happens because the overlay/background color is set to be have opacity:0;. If I do this for the small squares I lose the pink behind the text squares but the images look great.
In the existing system, there is no way to set an individual class for image/text square or each square separately.
So what I can't figure out is how to remove the hover state transition so that it doesn't cover the image in pink on mouseover but leaves the background pink in the text squares.
It looks like it is the .masonry_gallery_item_inner element that changes the opacity. I think that it is shifting the background-color but am unsure. Any help is appreciated.
.masonry_gallery_item.standard:hover .masonry_gallery_item_inner {
opacity: 0;
}
.masonry_gallery_item.square_small .masonry_gallery_item_inner {
background-color: rgba(255,235,233,1);
}
This is working the same way you need.
May be you are setting opacity:0; to class ".masonry_gallery_item.square_small .masonry_gallery_item_inner" and that is why you are losing the pink background.
Related
I need to keep the hover effect for this gallery grid, but I would like to remove it when the images in the grid are clicked on (i.e., within the Lightbox), is there an option for this?
Here is the webpage: https://www.kroschlab.com/people-test
Note how the hover effect occurs when you are in grid view (I want), but it also occurs when you click on the images and are in the Lightbox (I don't want).
In summary: is there a way to show text in the Lightbox without requiring a hover-over?
I resolved this by overlaying a background that was identical to the hover background, and displaying the text using opacity.
.yui3-lightbox2 .sqs-lightbox-meta {
opacity: 1 !important;
background-color: rgba(0,0, 0, 0.7);
}
I'm working to adjust some components so that they all function and look good in high-contrast mode. Edge seems to be adding a black background under all text that IE11 does not add. I can't seem to find a way to target this background in CSS, or any other way to normalize the behavior between the two browsers.
For example, let's say I have the following:
<div class="SelectedText">
Text!
</div>
And let's say I assigned background-color: cyan; and color: black; to the .SelectedText div.
In this scenario, IE11 renders it as expected with the div and text having the assigned colors. However, in Edge the div background and text are given the right colors, but the text itself gets a black background drawn behind it, making it unreadable black on black text.
The following image illustrates this problem occurring in the context of menu items with with basically the same markup described above.
Is there any way to disable or target this extra background that Edge adds?
Found the answer to this eventually. Setting -ms-high-contrast-adjust: none; on the parent can disable the backgrounds that Edge puts behind text.
Is it possible to apply both background-color and background-image using CSS in Eclipse 4? I am trying with the following example and all I can get is either the correct background or the image repeated many times within the window with the black background:
Shell {
background-color: gradient linear rgb(0,206,209) rgb(0,255,127);
background-image: url('./image.png');
}
Additionally, I would like to have the image appear once in the upper-right corner of the screen.
This does not seem to be possible currently.
The gradient background is drawn by creating a background image for the control, so any background image you set will override this.
Control background images are tiled and there is no control over this.
I've got this peculiar bug I've been trying to fix today—-still no luck.
If you look at the example below,
http://vitaliyg.com/alpha/hire/
Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.
What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.
In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.
Here is what I am trying to achieve:
Make the background-image appear centered.
When the user hovers over the background-image, it would not jump to the middle of the page.
And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.
Also, I'm using jParallax, found here:
http://stephband.info/jparallax/
Thank you for your help!
Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.
First, remove the margin-left and left from your .parallax-layer#background class.
.parallax-layer#background {
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-position: center bottom;
width: 1920px;
height: 620px;
}
Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.
.parallax-layer#tagline {
background-color: blue;
width: 400px;
height: 400px;
}
Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.
jQuery(document).ready(function(){
jQuery('#parallax .parallax-layer')
.parallax({
mouseport: jQuery('body')
});
jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});
You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.
This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the
viewport from the right of the blue box, that box animates to that location correctly.
However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.
For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.
Original Problem - jsFiddle
Fixed Applied - jsFiddle
Both jsFiddles are in full screen mode so the Parallax effects can be seen.
Instructions to view Original Problem:
1. Launch the above Original Problem jsFiddle Link.
2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
4. Press the Play Button at any time to reset the webpage.
To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )
The blue box indicates via text which jsFiddle your viewing. Cheers!
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.