Databases
StackOverflow2013
Postsdbo
POcss opacity on hover of div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss opacity on hover of div
    text
    copied!<p>I am new to CSS. I just want a div over another div on hover and its transparency should increase. I have done some thing like that</p> <pre><code>&lt;div id="maincontainer"&gt; &lt;div id="picture"&gt;&lt;img src="bill.jpg" alt="Bill Gates"&gt;&lt;/div&gt; &lt;h1&gt;A floating image&lt;/h1&gt; &lt;p id="bill"&gt;&lt;/p&gt; &lt;div id="mem"&gt;sfasdf&lt;/div&gt; &lt;/div&gt; &lt;div id="column1"&gt; &lt;p&gt;Haec disserens qua de re agatur et in quo causa consistat non videt...&lt;/p&gt; &lt;/div&gt; &lt;div id="column2"&gt; &lt;p&gt;causas naturales et antecedentes, idciro etiam nostrarum voluntatum...&lt;/p&gt; &lt;/div&gt; &lt;div id="column3"&gt; &lt;p&gt;nam nihil esset in nostra potestate si res ita se haberet...&lt;/p&gt; &lt;/div&gt; &lt;div id="slide"&gt; &lt;ul&gt; &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt; &lt;li id="sp"&gt;&lt;/li&gt; &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt; &lt;li id="sp"&gt;&lt;/li&gt; &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt; &lt;li id="sp"&gt;&lt;/li&gt; &lt;li id="ims"&gt;&lt;img src="test.jpg" height="200" width="200" /&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="left"&gt;l&lt;/div&gt; &lt;div id="right"&gt;R&lt;/div&gt; </code></pre> <p>and css file is</p> <pre><code>body { background-color: #FFCC66; background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 100%; margin-top: 100px; margin-right: 40px; margin-bottom: 100px; margin-left: 70px; } #picture { height: 200px; width: 170px; float: left; } #column1 { float: left; width: 33%; } #column2 { float: left; width: 33%; } #column3 { float: left; width: 33%; } #bill { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: 2px; text-align: justify; line-height: 20px; } #mem { position: absolute; top: 300px; left: 150px; } #slide { overflow: hidden; position: absolute; height: 220px; width: 300px; top: 500px; left: 400px; background-color: #333399; z-index: 1; } #left { position: absolute; top: 500px; left: 400px; height: 220px; width: 30px; background-color: #FF33CC; z-index: 2; text-align: center; color: #000000; vertical-align: middle; opacity: .5; } #left :hover { position: absolute; top: 500px; left: 400px; height: 220px; width: 30px; background-color: #CCCC00; z-index: 2; text-align: center; color: #000000; filter: alpha(opacity = 10); -moz-opacity: 10; -khtml-opacity: 10; opacity: 10; cursor: pointer; } </code></pre> <p>I want to increase transparency of div with id left on hover</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload