Как сделать круглую ссылку?

Question

[smash_wp]

Верстаю адаптивный сайт. Есть круглая картинка, которая должна быть ссылкой. Всё приблизительно получается, но только при наведении на картинку, над ней должен появляться блок с описанием. Если делать без этого блока, ссылка кое-как похожа на круглую. Но с этим блоком она получается квадратной, и с какими я только стилями не игрался, никак не получается этого добится. Подскажите, у кого есть опыт с такими вещами.



Заранее спасибо!

Comments

[Алексей Зуев]

Можете оформить пример на jsfiddle?

[smash_wp]

Лучше я вам скину пример с макета (не знаю, почему раньше этого не сделал).

Answer 1

[Андрей Журавчак]

Для ссылки тогда

display: block;
border-radius: 50%;

Answer 2

[Walt Disney]

Старики помнят то время когда интернет молодым все использовали теги

<map>
<area shape="circle">
</map>

гуглите, они до сих пор прекрасно работают, просто про них забыли

Для плавности ресайза надо так

Для плавности ресайза и текста внутри позиционированного по центру, можно как вариант вписать квадрат в круг, например так

Ответ на вопрос как поймать hover

Comments

[smash_wp]

Прочтите внимательно вопрос. "Верстаю адаптивный сайт." То есть изображения будут увеличиваться по мере увеличения ширины браузера.

[Walt Disney]

smash_wp: из адаптивности не следует плавный ресайз, тогда другой ответ

[smash_wp]

Спасибо, это и у меня получается. Но еще есть описание, которое должно выводится поверх картинки. Так вот с этим описанием у меня ссылка опять возвращается к прямоугольной форме. Возможно у вас получиться)

[Walt Disney]

smash_wp: только там квадратик с текстом надо ещё раз всё в сылку обернуть

[smash_wp]

Не то, просто круглую ссылку с текстом посередине я могу сделать. На картинке же видно, что верхний блок с текстом имеет фон. Так вот при одном коде, этот фон выходит за пределы ссылки, при другом - фон ведет себя как нужно, но уже ссылка квадратная.

[Walt Disney]

smash_wp: Я правильно понимаю что кругла ссылка у вас получалась, а не получалось корректно ловить hover?

[smash_wp]

Да!

[Walt Disney]

smash_wp: ну, так последняя ссылка в моём ответе это опять не то?

[smash_wp]

Ну, в принципе, что-то похожее) Только вот у меня подставляется полупрозрачный фон,а не картинка) Если удастся вырезать картинку будет неплохо, но вот хотелось бы более корректным методом это сделать.

Answer 3

[id_baton4eg]

если я правильно понял суть вопроса, просто добавь произвольный класс картинке с border-radius:55%, повесь гиперссылку и альт - вуаля))

Comments

[smash_wp]

Не совсем) Есть картинка, изначально круглая. Её нужно поместить в ссылку. Только вот, чтобы ссылка приняла форму картинки, то есть стала круглой. Всё бы ничего, если не этот блок с описанием))

[smash_wp]

То есть, чтобы активной областью ссылки была сама картинка. Выходишь за края картинки - это уже не ссылка. Как-то так...)

Answer 4

[Николай]

Ссылка по любому будет квадратной, единственный момент ты по разному можешь ссылку наложить на картинку. Вписать в квадратную ссылку круглую картинку, либо наложить поверх обычной картинки маску с округленной прозрачной серединой;