Unhide a Div that's only being showed on hover state - html

I was trying to modify this card from a grid plugin for wordpress, and there's an element that previously was a "read more" anchor element, and trying to save some time i decide it to use it as the green button from the picture below, but the problem is that is only showed in a hover state.
The url is the following one: http://uai.compite.cl
Is there any way to apply a rule for the not hover div? i tried the :not(:hover) but it doesn't seem to work in this case.
Thank you for the help


a.tg-link-button {
opacity: 1 !important;
-webkit-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-moz-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-ms-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
-o-transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1) !important;
}
I just added !important so it overrides the regular setting.


If i understood correctly you need the hover effect to be on every news div visible without hovering.
Just add on your css
.quito .tg-light .tg-media-button,
.quito .tg-light .tg-link-button {
opacity:1;
}

Related

Rotating icon on hover

I am still learning web development and decided to test my skills by making the minecraft.net website again. On one of the links on the main page there is a dropdown menu with an arrow pointed down beside the link. On hover the dropdown menu comes down and the arrow points up. Does anyone know how to code this hover effect for the link and arrow. Also the arrow changes direction and the menu comes down wherever you hover over the link or the arrow beside it. Your help would be much appreciated. Thanks in advance.

img:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}

If this arrow element (div, img etc) has a class e.g. "dropdown-arrow", you could do something like this:
.dropdown-arrow {
transform: rotate(0deg)
transition: transform 0.3s ease-in-out
}
.dropdown-arrow:hover {
transform: rotate(180deg)
}
Setting two transforms will ensure that when you are not hovering, it will return to its normal rotation. The transition will make this rotation smoother, not an instant change.

You can make an on hover event happen in CSS using the :hover psuedoselector. As for rotating your arrow, this using CSS' rotate() function will work:
#arrow:hover {
transform: rotate(180deg);
}
<div id="arrow">▼</div>

How to fix materialize modal issue

I am using materialize.css for our project I used materialize popup. My simple requirement is popup should be a vertical center of the body. Yes I tried my self it's also working well but some issue facing with that. Inside popup content showing blurring don't why if any know Please share your feedback.

The following is what I use to center my modal:
#modal {
top: 50% !important;
transform: translateY(-50%) scaleX(1) !important;
}
This should replace the top: 10% and transform: scaleX(1) scaleY(1) !important settings that are default in the materialize stylesheet. You can work with styling the div ID, class, or the element itself to get the style to overwrite the default materialize styles, or just replace the css in the materialize.css file itself.

Two css hovering effects in one, how two effects are linked with each other?

How to make two css code linked with each other?
For example:
An icon which is flipping when hovering it but it is also slightly going up with its white background.
You can see in this website https://www.designhenge.com, on its home page services section. How both css are interconnected with each other? What is the code behind it?
I have already made the icon flipping hovering effect. But I don't know how the white background box is slightly going up along with flipping icon on it.
These are the elements in the designhenge website which have flipping icons with white background box going up with them when hovering it:

you have to use transform:translate property on the div hover section, they have used the code to do that
.info-card:hover {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}

Try this below css:
.info-card:hover {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
You can also check like this:

Flip Button Background Image Vertically

I'm using CSS to style my button which has a background Image. I need a press effect. so I tried flopping my button vertically when it is active, as demonstrated in the fiddle.
http://jsfiddle.net/krishnathota/xzBaZ/10/
I'm able to Flip the image but along with the whole button. How can I only flip the background Image. ??
I have to write in another class other than .button:active or what?? Plaease help
Please check the Third and Fourth buttons and flip the BackgroundImage. The Firse and second buttons contain a <img> I do not want it to be flipped.
if this is not cross browser supported, Can you tell me how to change the background when button is active without changing the background color?

Add active state only for image
.button:active img{
/*Vertical Flip background img*/
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv; /*IE*/
top: 1px; position: relative;
/*-webkit-transform: translateY(1px);-moz-transform: translateY(1px);*/
}
DEMO
Here is the best tutorial for flipping the elements separately
http://www.sitepoint.com/css3-transform-background-image/

Absolute Positioning with Inputs in Android 2.2 Web Browser

It seems that android decides to overlay inputs when they are focused with another input...
Because of this it is destroying layouts, for example if you view this image
There are only TWO inputs in the DOM so i'm not sure where or how android is manipulating this input to draw it on the screen.
So what I am trying to do is remove the floating input which is drawn on the screen for no apparent reason.

I used the following code from this question:
input[type=text]
{
-webkit-user-modify: read-write-plaintext-only;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
However i noticed passwords would still have an overlay, so to fix this i chagned the input field from a Password field to a text field and applied the following css:
input.passwordField {
-webkit-text-security: disc;
}
Disable Android browser's input overlays?