[phpbb3] Hover preestablecido

Creo que el título no es el correcto pero no se me ocurre una forma mejor de llamarlo :c

Veréis, me gustaría saber si es posible que un hover salga sin necesidad de escirbir todo el código; os dejo un ejemplo que no me he explicado nada bien.

Código:

<div class="code1"><img src="http://placehold.it/65x65"><div class="code2">Texto</div></div>
  </div>

Con el siguiente css:

Código:

.code1 {
  position: relative;
  display: inline-block;
}

.code2 {
  width: 300px;
  height: auto;
   display: none;
  position: absolute;
  top: 20px;
  left: 70px;
}

.code1:hover .code2 {
   display: block;
   transition:  0.3s ease-out;
}

El texto saldría al pasar el ratón por la imagen como un hover normal. Mi pregunta es: Como siempre será esa imagen y ese texto ¿Es posible que aparezca el hover poniendo por ejemplo solamente un div? Algo así:

Código:

<div class="code1"></div>

Gracias de antemano! ^^

Sí, se puede. Utiliza la siguiente combinación de código:

HTML

Código:

<div class="code1"></div>

CSS

Código:

.code1 {
    background: transparent url('http://placehold.it/65x65') no-repeat 0 0;
    width: 65px;
    height: 65px;
}

.code1::after {
    content: 'Hola';
    opacity: 0;
}
      
.code1:hover::after {
    opacity: 1;
}

Como ya supondrás, la URL es la URL de la imagen y el texto «Hola» dentro de los símbolos de minutos es el texto de dentro. Sin embargo, ten en cuenta lo siguiente:

• Este método está restringido solo a cuando el contenido que quieres es texto, no HTML.
  
• Siempre puedes interpretar el selector ::after como un DIV imaginario que está dentro de .code1, por lo que podrás ponerle fondo y esas cosas.
  

Por cierto, muevo a la zona de soporte de programación.

Vaale, entonces en el caso de que quiera poner un texto más largo que "hola" quedaría de la siguiente forma:

Ejemplo feo


He intentado que aparezca fuera de la imagen pero no lo consigo, cómo sería en ese caso? porque con margins se me mueve todo. Es decir, que aparezca como si fuera un cuadrito a la derecha de la imagen por ejemplo.

Gracias de nuevo! <3

Puedes jugar con los posicionamientos.

Código:

.code1 {
    background: transparent url('http://placehold.it/65x65') no-repeat 0 0;
    width: 65px;
    height: 65px;
    font-family: 'Calibri', sans-serif;
    font-size: 12px;
    position: relative;
}
.code1::after {
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie, orci ut tincidunt tincidunt, sem ligula laoreet neque, nec pretium eros erat et libero. Pellentesque nec felis consectetur, mattis sapien a, venenatis augue. Maecenas elementum tincidunt tortor. Nullam sit amet lorem aliquet, suscipit lacus vel, pulvinar dolor. Nullam pretium aliquam tellus sagittis vestibulum. Duis ante dui, accumsan at augue sed, pulvinar ultrices augue. Curabitur vitae maximus diam. Pellentesque magna dolor, venenatis quis ligula in, hendrerit vehicula velit. Ut et nulla ligula. Maecenas at mauris eu mauris condimentum ornare ac ut magna.';
    opacity: 0;
    left: 65px;
    top: 0;
    background-color: lightgrey;
    display: block;
    position: absolute;
    width: 100px;
}
.code1:hover::after {
    opacity: 1;
}

En el código anterior puse posicionamiento relativo y convertí al elemento interior en un bloque para luego moverlo de forma absoluta. Esta práctica es un poco engorrosa y para hacer esto te recomiendo mejor hacerlo con HTML (para eso está).

Aaaaaaah! Vale! Muchas gracias! Soluciconado entonces!

Muchas gracias de nuevo! <3