Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is not a terribly difficult thing to do anymore, but it requires some skill with CSS3. There are also some Wordpress plugins available (try searching for Hover Image within the Wordpress plug-in site, for instance) and/or themes that include similar functionality that you may want to start with and then tweak to your purposes. But in the end, you basically need to look into the following CSS:</p> <ul> <li>:hover</li> <li>position:absolute</li> <li>z-index</li> </ul> <p>See this discussion at <a href="http://wordpress.org/support/topic/opacity-and-text-on-image-hover" rel="nofollow">Wordpress.org</a> for an idea of a place to begin. You don't actually need the :after tag discussed here. I made a similar thing using just the :hover attribute. The trick is to create an outer div which holds everything (including the image that you want to have appear) and then use "position: absolute" CSS with z-index to stack the items on top of each other. Use the :hover attribute to change the opacity of whichever item is on "top" of your stack to a lighter opacity which causes the underlying item to show through the top layer.</p> <p>CSS might look like this:</p> <pre><code>.gallery1 {width: 280px; height: 178px; display: inline-block; float: left; margin: 5px} .gallery1 img {position: absolute; z-index: 1} .gallery1 div {position: absolute; opacity: 1; z-index: 2; height: 178px; width: 280px; text-align:center; vertical-align: middle; line-height: 178px; margin: 0px; padding: 0px; font-family: Arial; font-size: 14pt; background-color: rgb(255, 245, 130)} .gallery1 div:hover {opacity: 0.3} </code></pre> <p>HTML would look like:</p> <pre><code>&lt;div class='gallery1'&gt; &lt;img src='whatever.jpg'&gt; &lt;div&gt;Text or code for icon here&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The idea is that through use of position:absolute the img is fixed in place within the gallery1 div, then through z-index it is set to a lower value than the div where the text or the icon are. The div with the icon is also position:absolute and given a higher z-index so that it stacks on top of the image, and it has a fixed height/width set to match the image size. Next it is given an opacity of 1 with a background-color, so that it covers up or hides the image. Through use of the :hover style this opacity is lowered allowing the image to show through.</p>
    singulars
    1. This table or related slice is empty.
    1. POWordpress gallery hover action
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USScott Shipp
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COThe method i ended up with was to put a background: url(icon.png) no repeat center; on the image. This ensures that the image will stay in the center of the image, and is therefore more suitable for responsive websites. Also, you don't have to use z-index and all that. Thanks for the answer though!
      singulars
      1. PO
      1. USBaard Kolstad
    2. COHi Baard--that addresses the icon floating on top but how did you address the need to have the preview of the project appear when the mouse hovers over it? That's what my answer was addressing. :)
      singulars
      1. PO
      1. USScott Shipp
    3. COI said this on my next post, might as well post it here as well. You are right that the solution i posted in the previous comment didn't solve all my problems, sorry about that. I ended up using the icon as a img tag, and then the both the color and the image as backgrounds in the CSS. Simple and responsive solution, worked out great. Thanks for the help!
      singulars
      1. PO
      1. USBaard Kolstad
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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