html - CSS Smooth fade and out transition (including text) -

-

I have a simple hover effect that changes text and background What would I want to know, if the fat effect is slowed down One possible way ... I'm sure you can use transition CSS, but I have very little knowledge on how to use it

(code is not complete code and works correctly Does not (but should suffice))

Here's HTML: 

  & lt; Div id = "ourproductsleft" class = "grid_3 alpha" & gt; & Lt; H4 & gt; Mail & lt; / H4 & gt; & Lt; Img class = "answer" src = "img / index / body / our products / mail_accaped." / & Gt; & Lt; P class = "comment" & gt; Packed with features and supported by our first-class technical support, data connectivity email hosting is a great choice for both personal and business users. & Lt; / P & gt; & Lt; Br> & Lt; Br> & Lt; P class = "comment2" & gt; & Lt; A href = "& lt;% = url_prefix%> hosting.HTML" & gt; Our & lt; U & gt; Mail & lt; / U & gt; For more information on service & Lt; / A & gt; & Lt; / P & gt; & Lt; / Div & gt; & Lt ;! - ourproductsleft end of class 3 - & gt;

Here's the CSS 

  / * background for each div * / #ourproductsleft {background: # F2F7FA; /*background-image:url(../img/index/body/ourproducts/grey.png); Background-Repeat: Repeat; * / Border-radius: 0 pixels; -Move Box-Shadow: 0 0 5px #ccc; -WebKit box-shadow: 0 0 5px #ccc; Box-Shadow: 0 0 5px #ccc; } / * Green background for each div * / #ourproductsleft: hover {background-image: url (../img/ index/ body / ourproducts / light_blue_background_pattern.jpg); Background repeat: repeat; } / * Do not display the original (mail, domain etc.) text on the hover view * / #ourproductsleft: hover .replies {display: none; } / * Keep display inline for main text on hover * / #ourproductsleft: hover .comment {display: inline; Opacity: 1; }

I have also created

Actually, you should use the opacity with the change instead of display: none because later it is not 'transitionable', there are other options depending on the option of the next Types are under the influence, but this is the basics.

HTML 

  & lt; Div id = "ourproductsleft" class = "grid_3 alpha" & gt; & Lt; H4 & gt; Mail & lt; / H4 & gt; & Lt; Img class = "answer" src = "img / index / body / our products / mail_accaped." / & Gt; & Lt; P class = "comment" & gt; Packed with features and supported by our first-class technical support, data connectivity email hosting is a great choice for both personal and business users. & Lt; / P & gt; & Lt; P class = "comment2" & gt; & Lt; A href = "& lt;% = url_prefix%> hosting.HTML" & gt; Our & lt; U & gt; Mail & lt; / U & gt; For more information on service & Lt; / A & gt; & Lt; / P & gt; & Lt; / Div & gt; & Lt ;! - end of ourproductsleft class 3 - & gt;

CSS 

  / * Background for each Div * / #ourproductsleft {background: # F2F7FA; Range radius: 0 pixels; -Move Box-Shadow: 0 0 5px #ccc; -WebKit box-shadow: 0 0 5px #ccc; Box-Shadow: 0 0 5px #ccc; } #HomeProducts are skipped. Com Mant, #ourproductsleft .replies {opacity: 0; Transition: Ease of Opacity 1s; } #Move Products: Left: Hover Comments, #indproductsand: hover .rayz {Opacity: 1; }

Comments

Post a Comment

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

-
Image
I have a requirement whenever I run my own kettle, dynamically took database connection parameters from an excel source Every run should go. I have an Excel column names: hostname, username, database, password. I want to pass these connection parameters to my table input stage dynamically whenever it runs the job. This is what I was trying to do. You can get it Connection parameters from the DB reading source (for example Excel or a CSV file in my example) < / Li> Store the parameters in the variable Using the variable in your connection's settings. Setting Variables Create another conversion for (you can not do it in the same conversion Uses): set variables element variable: The element that reads / writes your data creates a new connection and sets the connection parameter using $ {variable name_} Note that you will need to type in the field field in the field $ {password} Also keep in mind that this can be a security problem as the
Read more

multithreading - PhantomJS-Node in a for Loop -

-
I am trying to implement a screen-scraps application that opens a URL in which a parameter changes as it is for a loop: var data = [ '100', '101', '102', '103', '104']; (Var indexA = 0; indexA & lt; data.length; indexA ++) for {Phantom Generation ({'port': freeport}, function (pH) {ph.create page (function (page) {page.open ("http: //...++ data [index B] +" ... " , Status {console.log ("open site:" + data [index B], position); / * OLD * / indexB ++; page evaluation (function () {// page scrape and an object Return}, function {console.log (result.dataRequest); // here is the problem}); / * new and fixed * / indexB ++} first console Logs it: Open Site: 100 Success Opens Site: 101 Success B Ola Site: 102 Success Opening Site: 103 Success Opened Site: 104 Success Which is good. Data is verified in scrap HTML and from index to array Matches. So in page 101 I scrap '101 and retrieve' and pu
Read more

c++ - MATLAB .m file to .mex file using Matlab Compiler -

-
I know that it can speak as a very famous topic, but something that helps me with it Not found This scenario is: I have my functions function, no matter what's inside, it's a generic function that may depend on other toolboxes. Does. Has input and output; I want to generate the same myFun.mex function; : Lib myFun This way I get some new files: libmyfun.c libmyfun.dll Libmyfun.exp libmyfun.exports libmyfun .h libmyfun.lib Reading around and I think that Creating a myfun.cpp that is very famous is included: / * gateway function * / zero max function (ent NLHS, MXARRA * PLS [], int NRHS, CONST M Xeray * PHS []) Here is the Variable Deals * / / * code here * /} I have tried to do this and are called Regular of Max Generation: Max ('- v', 'myfun.cpp') But I get many errors, and I should say that my myfun.cpp copy / Paste Function is where I have a lot of doubts ... especially on input / output management. My q
Read more